Reagieren Router Komponente Handhabung als Variable

Question

Ich versuche, React-Router in eine bestehende react App zu implementieren.

Wie kann ich den react-Router verwenden, um Komponenten basierend auf bestimmten Bedingungen anzuzeigen.

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

    } 

angezeigte Routen bricht

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

Wie kann ich diese Komponenten mit ihren jeweiligen Stützen in als auch bestanden angezeigt werden?

Vielen Dank im Voraus

PS, ich denke Art, dass eine einzelne Seite sollte nur, dass einzelne Seite und eine Routing-Bibliothek sollte ein Zeichen sein, dass Sie nur eine Seite zu aktualisieren, anstatt haben sollten ..

Answer 1

Eine einseitige Anwendung wird "einzelne Seite" genannt, weil der Client nur eine HTML-Seite von der Serverseite holt. Eine einzelne Seitenanwendung kann mehrere "clientseitige Seiten" haben.

Die Anwendung, die Sie migrieren, verwendete eine Bedingung, weil sie keinen Router hatte. In react-router entspricht die Bedingung einer URL.

Der reagierende Router ermöglicht Ihnen, zu einer clientseitigen Seite zu navigieren. Sie verwenden eine Komponente namens <Link>, um zu einer clientseitigen Seite zu navigieren. Eine virtuelle Seite ist nur eine React-Komponente. Jede verfügbare Route muss eine Route definieren. Sie werden für jede clientseitige Seite eine Strecke benötigen:

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

Die LayoutComponent wird immer wiedergegeben werden:

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

Der Wert this.props.children wird die Seite, die der URL übereinstimmt. Wenn also die URL /issues ist die in {this.props.children} gemacht Komponente wird die IssuesPage sein, weil wir es so konfiguriert:

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

die Komponenten Jede Ihrer Seiten können dann machen

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 
    } 

} 

EreignisseSeite:

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

Das wird nicht aus dem Kasten heraus zu arbeiten und Sie gehen zu müssen, etwas zu lesen die react-router docs zu tun, aber Sie sollten genug Details haben, um herauszufinden, wie man es an der Arbeit. Sie können auch von "Getting Started with React Router" lernen.