Partage
  • Partager sur Facebook
  • Partager sur Twitter

React app avec plusieur pages

    6 septembre 2017 à 15:13:42

    Salut 

    je developpe une app en react et je souhaite que quand je clique sur un lien l'app me renvoie sur une autre page comportant un autre component. Mais quand je clique sur le lien le component s'affiche juste en dessous et je ne comprend pas pourquoi?

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



    • Partager sur Facebook
    • Partager sur Twitter
      26 septembre 2017 à 0:47:32

      React est prévu pour faire des single-page apps.

      Si tu souhaites faire plusieurs pages et gérer les liens entre elles, il te faut installer react-router-dom (https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom). 

      Pour comprendre le fonctionnement des routes dans react, voici un petit lien qui pourrait t'être utile : 

      https://reacttraining.com/react-router/web/example/route-config

      Pour plus de détail, tu peux aller jeter un oeil à mon cours sur reactJS qui pourrait te donner un petit aperçu. Dès la deuxième partie, je parle des routes dans reactJS. Si ce n'est pas clair, n'hésite pas à revenir vers moi ou commenter le cours, je serais ok pour l'améliorer et le rendre plus compréhensible, voire te donner quelques conseils ;)

      Le lien du cours en question :

      https://openclassrooms.com/courses/4555591?status=waiting-for-publication

      • Partager sur Facebook
      • Partager sur Twitter

      React app avec plusieur pages

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur
      • Markdown