React Router Redux ConnectedRouter 不随路由更改而更新答案

【问题标题】：React Router Redux ConnectedRouter Not Updating With Route ChangeReact Router Redux ConnectedRouter 不随路由更改而更新
【发布时间】：2017-10-20 23:48:08
【问题描述】：

我遇到了一个问题，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>
)

【问题讨论】：

标签： redux react-router react-redux react-router-redux react-router-v4

【解决方案1】：

看起来你正在做的是用 withRouter 包装 HeaderContainer 但你实际上应该用 AppContainer 包装 AppContainer 里面有实际的<Route />。

除此之外，我唯一要说的就是确保你跑了：

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

in order to user the ConnectedRouter

【讨论】：

【解决方案2】：

这个问题有点令人困惑，但我想我知道你的问题。我不相信路由器可以是 ConnectedRouter 的子节点，您需要用 ConnectedRouter 替换路由器，一切都会按预期工作。

【讨论】：