Réagissez App dans plusieurs pages

Question

J'essaie de faire une application de réaction et je veux faire une deuxième page quand je clique sur un lien, mais quand je clique sur le composant apparaissent juste sous le lien et pas dans une autre page. Je ne comprends pas pourquoi?

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

Vous devez envelopper la moitié supérieure d'un itinéraire. Les chemins sont utilisés comme un motif pour correspondre et déterminer ce qui doit être montré.

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