通过子路径渲染组件

Question

我有一个组件上有一些导航按钮，路由设置如下：

<Route path="/" component={App}>
  <IndexRoute component={HomePage} />
  <Route path="/id/person" component={Person} >
    <IndexRedirect to="summary" />
    <Route path="/id/person/summary" component={Summary} />
    <Route path="/id/person/history" component={History} />
  </Route>
</Route>

这一切都在React / Redux设置中运行，并且可以正常工作到HomePage。我不知道如何渲染子路线和在线示例有点稀缺。

在Person组件中，我应该这样做：

<div>
   {props.children}
</div>

但是，我如何将Redux状态传递给它呢？虽然感觉它应该是非常简单的东西，但是对我来说没有意义。

Answer 1

为子路由根设置索引路由，然后在匹配子路由时呈现其他组件。否则，将呈现根组件。像这样的东西：

<Route path=":id/person" >
    <IndexRoute component={Person} />
    <Route path="summary" component={Summary} />
    <Route path="history" component={History} />
</Route>

如果匹配:id/person，则它将呈现Person组件。如果匹配:id/person/summary，则它将呈现摘要组件等

修改

说你的路线呈现Person组件，你的Summary和History组件需要state.App.Items.List作为道具。

import React, {
    Component,
} from 'react';

class Person extends Component {

    render() {
        const { items } = this.props
        return (
            <div className='person-container'>
                <Summary items={items} />
                <History items={items} />
            </div>
        );
    }
}


function mapStateToProps(state) {
    return {
        items: state.App.Items.List,
    }
}
export default connect(mapStateToProps, null)(Person)

这是你想要做的吗？