Reaction App in multipleages

Question

나는 반응하는 앱을하려고하는데 링크를 클릭 할 때 두 번째 페이지를하고 싶지만 구성 요소를 클릭하면 다른 페이지가 아닌 링크 아래에 나타납니다. 왜 이해가 안되니?

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

경로에서 상단 절반을 감쌀 필요가 있습니다. 경로는 대조해야 할 패턴을 결정하기위한 패턴으로 사용됩니다.

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