作爲變量的反應路由器組件處理

Question

我想實現React-Router到現有的反應應用程序。

如何根據某些條件使用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頁面。單頁面應用程序可以有多個「客戶端頁面」。

您正在遷移的應用程序使用了一些條件，因爲它沒有路由器。在react-router中，條件與URL匹配。

響應路由器允許您導航到客戶端頁面。您將使用名爲<Link>的組件導航到客戶端頁面。虛擬頁面只是一個React組件。每條可用路由都需要定義Route。您將需要一個路線爲每個客戶端頁面：

<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 
    } 

} 

EventsPage：

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"中瞭解到。