React App in multipages

Question

Ich versuche, eine Reactive-App zu tun, und ich möchte eine zweite Seite zu tun, wenn ich auf einen Link klicken, aber wenn ich auf die Komponente klicken nur unter dem Link und nicht auf einer anderen Seite. Ich verstehe nicht warum?

render() { 
    return (
<Router> 
     <div id="tableau"> 

      <Table compact celled > 
       <Table.Body> 
       <Table.Row> 
        <Link to="/sub"><Table.Cell onClick={this.test.bind(this)}>{this.props.topic.text}</Table.Cell> 
        <Table.Cell>{this.props.topic.arn}</Table.Cell></Link> 
        <Table.Cell collapsing> 
         <Button circular onClick={this.handleOpenModal}>S'inscrire</Button> 
         <ReactModal isOpen={this.state.showModal} contentLabel="Minimal Modal Example"> 

          <button onClick={this.handleCloseModal}>Close Modal</button> 
          <AppInscription></AppInscription> 

         </ReactModal> 
         <Link to="/"><Button circular >Cacher</Button></Link> 
         <Button circular onClick={this.deleteThisTopic.bind(this)}>Suprimer</Button> 
        </Table.Cell> 
       </Table.Row> 
       </Table.Body> 
      </Table> 
      <Route exact path="/sub" component={AppSub}/> 

      </div> 
</Router> 

Answer 1

Sie müssen die obere Hälfte in einer Route einwickeln. Die Pfade werden als Muster verwendet, um zu vergleichen und zu bestimmen, was angezeigt werden soll.

render() { 
    return (
     <Router> 
      <div id="tableau"> 
       <Route exact path='/' render={() => (
        <Table compact celled > 
         <Table.Body> 
          <Table.Row> 
          <Link to="/sub"><Table.Cell onClick={this.test.bind(this)}>{this.props.topic.text}</Table.Cell> 
          <Table.Cell>{this.props.topic.arn}</Table.Cell></Link> 
           <Table.Cell collapsing> 
           <Button circular onClick={this.handleOpenModal}>S'inscrire</Button> 
            <ReactModal isOpen={this.state.showModal} contentLabel="Minimal Modal Example"> 

             <button onClick={this.handleCloseModal}>Close Modal</button> 
             <AppInscription></AppInscription> 

            </ReactModal> 
            <Link to="/"><Button circular >Cacher</Button></Link> 
           <Button circular onClick={this.deleteThisTopic.bind(this)}>Suprimer</Button> 
           </Table.Cell> 
          </Table.Row> 
         </Table.Body> 
        </Table> 
       )} /> 
       <Route exact path="/sub" component={AppSub}/> 
      </div> 
     </Router> 
    ) 
}