react-router-redux: 路线改变但组件不显示
react-router-redux: Routes change but components are not displayed
我正在尝试使用 react-router-redux 和 Immutable.js 减速器来设置路由。
我已经使用 syncHistoryWithStore
设置了商店,当我单击 Link
时,我可以看到已调度正确的 @@router/LOCATION_CHANGE
操作,商店是使用基本减速器的 routing
键的位置信息正确更新,并且 URL 正在更改为正确的位置。
问题是组件没有更新。如果我在特定位置加载页面,我会看到正确的组件,但是一旦我点击之后的 Link
就不会显示其他组件。
我已经包含了我认为是相关的文件(删除了一些不相关的信息):
initialize.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
只是 Route
和 IndexRoute
组件的嵌套列表,从 <Route path='/' component={App} />
开始。当我 console.log
应用程序的 children 属性时,我可以看到在它首次呈现时传递了 children 并且它正确地呈现了它们,但在其他任何时候我都没有看到任何控制台反馈children 变化。
记录的操作(状态是一个不可变映射,但我 运行 toJS()
用于记录目的):
我错过了什么应该在我通过我的路线移动时更改显示的组件?
问题是我从 createSelectLocationHistory
返回 prevRoutingState
而不是 prevRoutingStateJS
。
我正在尝试使用 react-router-redux 和 Immutable.js 减速器来设置路由。
我已经使用 syncHistoryWithStore
设置了商店,当我单击 Link
时,我可以看到已调度正确的 @@router/LOCATION_CHANGE
操作,商店是使用基本减速器的 routing
键的位置信息正确更新,并且 URL 正在更改为正确的位置。
问题是组件没有更新。如果我在特定位置加载页面,我会看到正确的组件,但是一旦我点击之后的 Link
就不会显示其他组件。
我已经包含了我认为是相关的文件(删除了一些不相关的信息):
initialize.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
只是 Route
和 IndexRoute
组件的嵌套列表,从 <Route path='/' component={App} />
开始。当我 console.log
应用程序的 children 属性时,我可以看到在它首次呈现时传递了 children 并且它正确地呈现了它们,但在其他任何时候我都没有看到任何控制台反馈children 变化。
记录的操作(状态是一个不可变映射,但我 运行 toJS()
用于记录目的):
我错过了什么应该在我通过我的路线移动时更改显示的组件?
问题是我从 createSelectLocationHistory
返回 prevRoutingState
而不是 prevRoutingStateJS
。