首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >react-router-redux:路由更改,但不显示组件

react-router-redux:路由更改,但不显示组件
EN

Stack Overflow用户
提问于 2016-12-24 03:38:58
回答 0查看 563关注 0票数 0

我正在尝试使用带有Immutable.js reducers的react-router-redux来设置路由。

我已经使用syncHistoryWithStore设置了存储,当我单击一个Link时,我可以看到正确的@@router/LOCATION_CHANGE操作被分派,存储被正确地更新为基本reducer的URL键的位置信息,并且routing正在更改为正确的位置。

问题是组件没有更新。如果我在特定位置加载页面,我会看到正确的组件,但在此之后单击Link后,不会显示任何其他组件。

我已经包含了我认为是相关文件(编辑了一些不相关的信息):

initialize.js:

代码语言:javascript
复制
import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly'
import { browserHistory } from 'react-router'
import { routerMiddleware, syncHistoryWithStore } from 'react-router-redux'
import reducers from 'reducers'

const browserHistoryRouterMiddleware = routerMiddleware(browserHistory)

const middlewares = [browserHistoryRouterMiddleware]

/* Create store */
const store = createStore(
  reducers,
  undefined,
  composeWithDevTools(
    applyMiddleware(...middlewares),
  ),
)

/* Configure history */
const createSelectLocationState = () => {
  let prevRoutingState, prevRoutingStateJS

  return (state) => {
    const routingState = state.get('routing')
    if (typeof prevRoutingState === 'undefined' || prevRoutingState !== routingState) {
      prevRoutingState = routingState
      prevRoutingStateJS = routingState.toJS()
    }
    return prevRoutingState
  }
}

const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: createSelectLocationState(),
})

export { store, history }

index.js:

代码语言:javascript
复制
import React from 'react'
import { render } from 'react-dom'
import { store, history } from 'initialize'
import Root from 'components/Root'

render(
  <Root store={store} history={history} />,
  document.getElementById('root')
)

Root.js:

代码语言:javascript
复制
import React, { PropTypes } from 'react'
import { Provider } from 'react-redux'
import { Router } from 'react-router'
import routes from 'routes'

const Root = ({ store, history }) => (
  <Provider store={store}>
    <Router history={history}>
      {routes}
    </Router>
  </Provider>
)

Root.propTypes = {
  store: PropTypes.object.isRequired,
}

export default Root

routes只是RouteIndexRoute组件的嵌套列表,从<Route path='/' component={App} />开始。当我console.log应用程序的孩子道具时,我可以看到当它第一次渲染时有孩子通过了,并且它正确地渲染了他们,但在其他任何点上,我都没有看到任何关于孩子变化的控制台反馈。

记录的操作(状态是一个不可变的映射,但我运行toJS()是为了记录日志):

当我在路线中移动时,我遗漏了什么会改变显示的组件?

EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41307029

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档