React Router Redux ConnectedRouter не обновляется с изменением маршрута

Я столкнулся с проблемой, когда ConnectedRouter не обновляет историю при изменении маршрута. При изменении маршрута хранилище получает обновленную историю, а маршрутизатор (дочерний элемент ConnectedRouter) получает обновленную историю, но история ConnectedRouter остается неизменной. Приложение не отображает новый компонент, но изменяется URL-адрес браузера.

показатель

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import AppContainer from './containers/app'
import { history, store } from './store'

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <AppContainer />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
)

хранить

import createHistory from 'history/createBrowserHistory'
import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware } from 'react-router-redux'
import { rootReducer } from './reducers/root'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

export const history = createHistory()
const middleware = routerMiddleware(history)

export const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(middleware))
)

rootReducer

import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'

export const rootReducer = combineReducers({
  router: routerReducer,
})

ЗаголовокКонтейнер

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { push } from "react-router-redux"
import { HeaderTemplate } from '../components/templates/header'

const mapStateToProps = state => ({})

const mapDispatchToProps = dispatch =>
  bindActionCreators({
    pushRoute: location => dispatch(push(location)),
  }, dispatch)

export default withRouter(
  connect(mapStateToProps, mapDispatchToProps)(HeaderTemplate)
)

ЗаголовокШаблон

import React from 'react'

export const HeaderTemplate = props => (
  <div className="content">
    <nav>
      <ul>
        <SomeLink onClick={() => props.pushRoute('/')}>Link1</SomeLink>
        <SomeLink onClick={() => props.pushRoute('/test')}>Link2</SomeLink>
      </ul>
    </nav>
  </div>
)

person cocacrave    schedule 21.05.2017    source источник


Ответы (2)


Похоже, что вы делаете обертку HeaderContainer с помощью withRouter, но на самом деле вам следует обернуть AppContainer этим, предполагая, что AppContainer имеет настоящие <Route /> внутри него.

Кроме этого, единственное, что я хотел бы сказать, это убедиться, что вы побежали:

npm install --save react-router-redux@next

для использования ConnectedRouter

person LoganRx    schedule 23.05.2017

Вопрос немного сбивает с толку, но я думаю, что знаю вашу проблему. Я не верю, что Router может быть потомком ConnectedRouter. Вам нужно ЗАМЕНИТЬ Router на ConnectedRouter, и все будет работать как положено.

person sasnyde2    schedule 21.05.2017