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

Question

Я столкнулся с проблемой, когда 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,
})

HeaderContainer

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)
)

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>
)

Answer 1

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

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

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

для того, чтобы пользовательConnectedRouter

Answer 2

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