多页 React App

Question

我尝试做一个反应应用程序，当我点击 link 时我想做第二页但是当我点击组件时出现在 link 下而不是另一个页。我不明白为什么？

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

多页 React App

React App in multipages

router

multipage

reactjs