React Routerのコンポーネント処理を変数として

Question

React-Routerを既存のリアクションアプリケーションに実装しようとしています。

反応ルータを使用して、いくつかの条件に基づいてコンポーネントを表示する方法を教えてください。ルートの表示

var displayRHS; 

if(this.state.displayEventComponent){ 
     {/* 
     * Events Menus 
     */} 
     displayRHS = <DisplayEventComponent 
      parentFunc={this.displayComponentFunction} 
      parentPropDay={this.state.day} 
     /> 
    } else if (this.state.displayToDoListComponent){ 
     {/* 
      * To Do List Menu 
      */} 
     displayRHS = <DisplayToDoListComponent 
      parentCallback_2={this.updateDisplayToDoListComponent} 
      updateList={this.state.updateDisplayToDoListComponent} 
      displayIssuesNotList={false} 
     /> 

    } else if (this.state.displayIssuesComponent) { 
     {/* 
      * Issues menu 
      */} 
     displayRHS = <DisplayIssuesComponent 
      parentCallback_2={this.updateDisplayToDoListComponent} 
      updateList={this.state.updateDisplayToDoListComponent} 
      displayIssuesNotList={true} 
     /> 

    } 

は、私は同様に渡され、それぞれの小道具で、これらのコンポーネントを表示するにはどうすればよい

<Route exact path="/" component={displayRHS} /> 

を破りますか？

事前に多くの感謝

PS、私は一種のあなただけの代わりに、ページの更新が必要記号である必要があり、単一のページだけでは単一のページであることを考えると、ルーティングライブラリを使用しています。..

Answer 1

クライアントがサーバー側からHTMLページを1つだけフェッチするため、単一ページアプリケーションは「シングルページ」と呼ばれます。単一のページアプリケーションは、複数の「クライアントサイドページ」を持つことができます。

移行するアプリケーションにはルータがないために何らかの条件が使用されました。反応ルータでは、条件がURLと一致しています。

反応ルータでは、クライアント側のページに移動できます。 <Link>というコンポーネントを使用して、クライアント側のページに移動します。仮想ページは単なるReactコンポーネントです。利用可能な各ルートはRouteを定義する必要があります。あなたは、各クライアント側のページの1ルートが必要になります。

<Router> 
    <Route exact path="/" component={LayoutComponent}> 
     <IndexRoute component={ToDoPage} /> 
     <Route path="/events" component={EventsPage} /> 
     <Route path="/issues" component={IssuesPage} /> 
    <Route/> 
</Router> 

LayoutComponentは常にレンダリングされます：

class LayoutComponent extends React.Component { 
    render() { 
     return (
      <ul> 
       <li><Link to="/">Home</Link></li> 
       <li><Link to="/events">Events</Link></li> 
       <li><Link to="/issues">Issues</Link></li> 
      </ul> 
      {this.props.children} 
     ); 
    } 
} 

this.props.childrenの値がURLに一致するページになります。 URLが/issuesであれば、我々はそのように構成されているため{this.props.children}にレンダリングされたコンポーネントはIssuesPageになるよう：

<Route path="/issues" component={IssuesPage} /> 

その後、コンポーネントをレンダリングすることができ、ページの各

ToDoPage：

class ToDoPage extends React.Component { 

    constructor() { 
     this.state = { 
      updateDisplayToDoListComponent: [] 
     }; 
    } 

    render() { 
     return (
      <DisplayToDoListComponent 
       parentCallback_2={this.updateDisplayToDoListComponent} 
       updateList={this.state.updateDisplayToDoListComponent} 
       displayIssuesNotList={false} /> 
     ); 
    } 

    public updateDisplayToDoListComponent() { 
     // do something 
    } 

} 

イベントページ：

class EventsPage extends React.Component { 

    constructor() { 
     this.state = { 
      day: 1 
     }; 
    } 

    render() { 
     return (
      <DisplayEventComponent 
       parentFunc={this.displayComponentFunction} 
       parentPropDay={this.state.day} /> 
     ); 
    } 

    public displayComponentFunction() { 
     // do something 
    } 

} 

IssuesPage：

class IssuesPage extends React.Component { 

    constructor() { 
     this.state = { 
      updateDisplayToDoListComponent: [] 
     }; 
    } 

    render() { 
     return (
      <DisplayIssuesComponent 
       parentCallback_2={this.updateDisplayToDoListComponent} 
       updateList={this.state.updateDisplayToDoListComponent} 
       displayIssuesNotList={true} /> 
     ); 
    } 

    public updateDisplayToDoListComponent() { 
     // do something 
    } 
} 

これは、箱から出して仕事に行くのではありません、あなたがreact-router docsのいくつかの読み取りを行う必要があるとしているが、あなたはそれが動作するように取得する方法を見つけ出すのに十分な詳細を持っている必要があります。 "Getting Started with React Router"からも学習できます。