路由和組件在React Starter Kit中的作用

Question

我目前正在嘗試了解React Starter Kit布置項目的方式以及它的各個部分如何協同工作。

目前正在努力尋找路線和組件。 路由的作用是確定要在特定路徑上顯示的內容，但隨后會顯示帶有App組件及其所有子組件。

似乎總是顯示App內容。 路由定義了在App內部作為其子級顯示的內容，對嗎？

Answer 1

第什么是你的內部App組件，除非或直到你已經定義並不總是被顯示的App作為你的路由配置中根組件。

例如

  <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組件的子級。

因此，對於您問題的第二部分-“路由定義了在App內部作為子元素顯示的內容，這正確嗎？”

是的，您是對的-但是要將其他組件顯示為根組件的子代，則必須通過以下方式在根組件的render方法中提及它：

    {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而當route是/about或/users顯示App子組件（即About或Users組件）。

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

{this.props.children} 

隨子組件的路線變化而變化。