React Router Redux ConnectedRouter未使用路由更改进行更新

我遇到了一个问题，ConnectedRouter没有更新路由更改的历史记录。 路由更改存储获取更新的历史记录，路由器（ConnectedRouter的子级）获取更新的历史记录，但ConnectedRouter的历史记录保持不变。应用程序不会呈现新组件，但浏览器的url会更改

索引

减根剂

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

从“React”导入React
导出常量HeaderTemplate=props=>(

props.pushRoute（'/'）}>Link1
props.pushRoute（'/test'）}>Link2

)

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

看起来您所做的是用路由器的

包装HeaderContainer，但您实际上应该包装AppContainer，假设AppContainer具有实际的
在它里面

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

npm安装--保存路由器-redux@next


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