路徑和組件在React入門套件中的作用

Question

我目前正在嘗試瞭解React入門工具包展示項目及其部分如何協同工作的方式。

目前正在與路線和組件掙扎。路由的作用是決定在特定路徑上顯示哪些內容，但是其中包含組件App及其所有子組件，顯示的內容......圍繞什麼路由定義的？

好像總是顯示App中的內容。路線定義了App作爲其子女的一部分顯示的內容，對嗎？

Answer 1

不，您的App組件內部的內容並不總是顯示，除非或直到您已將App定義爲路由配置中的根組件。

e.g

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="about" component={About}/> 
     <Route path="users" component={Users}> 
     <Route path="/user/:userId" component={User}/> 
     </Route> 
     <Route path="*" component={NoMatch}/> 
    </Route> 
    </Router> 

在上面的代碼限定

<Route path="/" component={App}> 

導致要顯示第一和所有其它路徑的路徑App組分是App組件的子。

因此，對於你問題的第二部分 - 「路線確定哪些應用程序內顯示作爲其子的一部分，是正確的」

是的，你是對的 - 但要顯示其他部件如兒童根組件，就不得不提到它通過使您的根組件的方法

{this.props.children} 

如

const App = React.createClass({ 
    render() { 
    return (
     <div> 
     <h1>App</h1> 
     <ul> 
      <li><Link to="/about">About</Link></li> 
      <li><Link to="/users">users</Link></li> 
     </ul> 
     {this.props.children} 
     </div> 
    ) 
    } 
}) 

所以現在你告訴，當URL是/顯示我的根組件即App，如果路線是App即About或Users組件的​​或/users顯示子組件。

您的根組件App就像一個模板，您可以將頁眉，導航欄，頁腳顯示爲靜態內容。但身體部位你說

{this.props.children} 

正在改變，你的路線隨着你的孩子的組成部分而改變。