渲染组件通过分路线

我已经有一些关于它的导航按钮组件，与路由的设置是这样的：渲染组件通过分路线

<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>

这一个反应，和/终极版安装所有的运行和正常工作达主页。我不知道如何渲染子路线，线上的例子有点稀少。

在人组成部分，我应该做的：

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

但后来我如何通过Redux的状态下来了吗？有些东西对我来说没有意义，尽管它觉得它应该是非常简单的东西。

来源

2016-11-24 worker11811

为您的子路径根目录设置索引路由，然后在匹配子路由时渲染其他组件。否则，呈现根组件。像这样：

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

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

编辑：

说你的路线呈现人组成部分，你的总结和历史组件需要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)

这是你想要做的吗？

来源

2016-11-24 16:25:12 jacoballenwood

我该如何传递道具？ – worker11811

你是在用'state'来谈论你的组件吗？你可以用'connect'将你需要的状态连接到组件内部。在这里查看这个QA http://stackoverflow.com/questions/38202572/understanding-react-redux-and-mapstatetoprops。因此在Summary组件中，可以映射state.Summary并将其传递给子组件等。如果你正在谈论其他事情，请告诉我，我会尽力回答 – jacoballenwood

子路线的主要路线应该是摘要而不是人。没有违约汇总的人不能存在。所以人是一条抽象路线。除此之外，我不太确定摘要和历史和子路线如何在人员路线中呈现。 – worker11811

渲染组件通过分路线

回答

相关问题