React App in multipages

Question

I try to do a react app and i want to do a second page when i click on a link but when i click the component appear just under the link and not in an other page. I dont understand why ?

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

You need to wrap the top half in a route. The paths are used as a pattern to match against and determine what should be shown.

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