我有一个简单的路由器(启动redux-router并切换react-router到消除变量).
<Router history={history}>
<Route component={Admin} path='/admin'>
<Route component={Pages} path='pages'/>
<Route component={Posts} path='posts'/>
</Route>
</Router>
Run Code Online (Sandbox Code Playgroud)
管理组件基本上只是{this.props.children}一些导航; 它不是connected组件.
Pages组件是一个connected组件,mapStateToProps()如下所示:
function mapStateToProps (state) {
return {
pages: state.entities.pages
};
}
Run Code Online (Sandbox Code Playgroud)
帖子更有趣:
function mapStateToProps (state) {
let posts = map(state.entities.posts, post => {
return {
...post,
author: findWhere(state.entities.users, {_id: post.author})
};
}
return {
posts
};
}
Run Code Online (Sandbox Code Playgroud)
然后当我加载页面或在帖子/页面路由之间切换时,我在console.log()中得到以下内容.
// react-router navigate to /posts
Admin render()
posts: map state to props
Posts render() …Run Code Online (Sandbox Code Playgroud)