渲染組件通過分路線

我已經有一些關於它的導航按鈕組件，與路由的設置是這樣的：渲染組件通過分路線

<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

渲染組件通過分路線

回答

相關問題