【问题标题】:react-router-redux: Routes change but components are not displayedreact-router-redux:路由改变但组件不显示
【发布时间】:2017-05-09 11:44:16
【问题描述】:

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

我已经使用syncHistoryWithStore 设置了商店,当我点击Link 时,我可以看到发送了正确的@@router/LOCATION_CHANGE 操作,商店已使用位置信息正确更新到routing 基本 reducer 的键,并且 URL 正在更改为正确的位置。

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

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

初始化.js:

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:

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:

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 组件的嵌套列表,以&lt;Route path='/' component={App} /&gt; 开头。当我console.log App 的 children 道具时,我可以看到它第一次渲染时传递了孩子并且它正确渲染了它们,但在其他任何时候我都没有看到任何关于孩子变化的控制台反馈。

记录的操作(状态是一个不可变映射,但我运行toJS() 用于记录目的):

当我在路线中移动时,我错过了什么应该改变显示的组件?

【问题讨论】:

    标签: javascript reactjs redux react-router react-router-redux


    【解决方案1】:

    问题是我从createSelectLocationHistory返回prevRoutingState而不是prevRoutingStateJS

    【讨论】:

      猜你喜欢
      • 2020-09-20
      • 1970-01-01
      • 2019-01-30
      • 2018-12-25
      • 2016-09-02
      • 2018-12-18
      • 2020-05-06
      • 2017-10-20
      • 2020-09-12
      相关资源
      最近更新 更多