作为变量的反应路由器组件处理

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