React Router Redux ConnectedRouter 未随路由更改而更新 [英] React Router Redux ConnectedRouter Not Updating With Route Change

问题描述

我遇到了一个问题，即 ConnectedRouter 没有更新路由更改的历史记录.在路由更改存储获取更新的历史和路由器(ConnectedRouter 的孩子)获取更新的历史但 ConnectedRouter 的历史保持不变.该应用不会呈现新组件，但浏览器的 url 会发生变化.

索引

从 'react' 导入 React从'react-dom' 导入 ReactDOM从'react-redux'导入{提供者}从'react-router-redux'导入{ConnectedRouter}从 './containers/app' 导入 AppContainer从'./store'导入{历史，存储}ReactDOM.render(<提供者商店={商店}><ConnectedRouter history={history}><AppContainer/></ConnectedRouter></提供者>,document.getElementById('root'))

商店

从'history/createBrowserHistory'导入createHistoryimport { createStore, applyMiddleware, compose } from 'redux'从'react-router-redux'导入{ routerMiddleware}从 './reducers/root' 导入 { rootReducer }const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ||撰写导出 const 历史记录 = createHistory()const 中间件 = 路由器中间件(历史)export const store = createStore(根减速器，composeEnhancers(applyMiddleware(middleware)))

rootReducer

import { combineReducers } from 'redux'从'react-router-redux'导入{ routerReducer }export const rootReducer = combineReducers({路由器:routerReducer，})

HeaderContainer

import { bindActionCreators } from 'redux'从'react-redux'导入{连接}导入 { withRouter } from 'react-router-dom'从react-router-redux"导入{推}从 '../components/templates/header' 导入 { HeaderTemplate }const mapStateToProps = state =>({})const mapDispatchToProps = dispatch =>bindActionCreators({pushRoute:位置=>调度(推送(位置))，}， 派遣)导出默认 withRouter(连接(mapStateToProps，mapDispatchToProps)(HeaderTemplate))

标题模板

从 'react' 导入 React导出 const HeaderTemplate = props =>(<div className="内容"><导航><ul><SomeLink onClick={() =>props.pushRoute('/')}>Link1</SomeLink><SomeLink onClick={() =>props.pushRoute('/test')}>Link2</nav>

)

解决方案

看起来你正在做的是用 withRouter 包装 HeaderContainer 但实际上你应该假设 AppContainer 包含实际的 <Route/> 在内，用它包装 AppContainer.

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

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

为了用户 ConnectedRouter

I'm running into an issue where ConnectedRouter is not updating history on route change. On route change store gets updated history and Router (ConnectedRouter's child) gets updated history but ConnectedRouter's history stays same. The app doesn't render new component but the browser's url changes.

index

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

store

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

解决方案

It looks like what you are doing is wrapping the HeaderContainer with the withRouter but you should actually be wrapping the AppContainer with that assuming that the AppContainer has the actual <Route />'s inside of it.

Other than that the only thing I would say is to make sure you ran:

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

in order to user the ConnectedRouter

这篇关于React Router Redux ConnectedRouter 未随路由更改而更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！