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構成要素の子であるせます。あなたの質問の後半部分について

ので

- しかし、子供のような他の構成要素を表示するために -

はい、あなたが正しいです「のルートがその子の一部として、アプリケーションの内部で表示するかを定義、正しいことです」ルートコンポーネントの、あなたはそれで言及経由でルートコンポーネントのメソッドをレンダリングする必要が

{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、ルートが​​または/usersの子コンポーネントがApp、つまりAboutまたはUsersのコンポーネントで表示されているとします。

ルートコンポーネントAppは、ヘッダー、ナビゲーションバー、フッターを静的コンテンツとして表示するテンプレートのようなものです。しかし、あなたの言う身体部分

{this.props.children} 

あなたの子供のコンポーネントであなたのルートが変更されると、変更されています。