web-dev-qa-db-fra.com

comment naviguer d'une page à l'autre dans react js?

J'ai deux composants. Dans le premier composant, j'ai un bouton. En cliquant sur le bouton, je veux naviguer vers un autre composant ou une autre page.

voici mon code http://codepen.io/naveennsit/pen/pymqPa?editors=1010

class App extends React.Component {
    handleClick(){
      alert('---');
    }

    render() {
        return <button onClick={this.handleClick}>hello</button>
    }
}

class Second extends React.Component {
    render() {
        return <label>second component</label>
    }
}

React.render( <App /> , document.getElementById('app'))
javascriptreactjsreact-router
6
user5711656

Si vous voulez créer une seule application, je vous suggérons d'utiliser React Router . Sinon, vous pouvez utiliser du Javascript simple:

window.location = 'newUrl';
6
Lars Graubner

Il y a deux approches ici, les deux assez faciles. 

Approche 1: Utilisation du React Router

Assurez-vous que l'itinéraire est déjà défini quelque part dans votre projet. Il devrait contenir au moins ces informations: chemin et composant. Il devrait être défini quelque chose comme ceci: 

import YourComponent from "./path/of/your/component"; 

<Route path="/insert/your/path/here" component={YourComponent} />

Ensuite, vous souhaitez mettre à jour votre fonction handleClick pour utiliser un Link à partir de react-router-dom (vous devrez peut-être installer ce paquet si vous ne l'avez pas déjà avec npm i react-router-dom). 

Supprimez ceci (votre fonction handleClick vous n'en avez pas besoin avec Link): 

handleClick(){
  alert('---');
}
    render() {
        return <button onClick={this.handleClick}>hello</button>
    }

}

Maintenant changez votre méthode de rendu en ceci: 

    render() {
        return (
          <div>
            <Link to="/insert/your/path/here" className="btn btn-primary">hello</Link>
         </div>
       ); 
    }

}

Donnez à Link les mêmes noms de classe que vous utiliseriez avec votre bouton afin qu'il soit stylé comme un bouton et non comme une balise d'ancrage. 

Mettre tous ensemble. 

// Où que votre routeur soit avec vos routes

    import YourComponent from "./path/of/your/component";

    <Router>
      <Route exact path="/insert/your/path/here" component={YourComponent} />
    </Router>

// Le composant qui a la fonction handleClick 

import { Link } from "react-router-dom"; 

class App extends Component {
  render() {
     return(
       <div>
         <Link to="/insert/your/path/here" className="btn btn-primary">hello</Link>
      </div>
     );
  }
}

Approche 2: Utiliser window.open

Assurez-vous toujours que l'itinéraire est configuré comme ci-dessus. La différence ici est que vous n'utiliserez pas Link, ce qui signifie que vous aurez besoin de votre fonction handleClick. Ce sera la seule chose qui change. 

Change ça: 

handleClick(){
  alert('---');
}

pour ça: 

handleClick(){
  window.open("/insert/your/path/here");
  //this opens in a new tab (believe that is what the owner of the question wanted if not you can do window.location.href = "/insert/your/path/here". 
}

C'est tout. Si vous souhaitez dynamiser vos chemins, cela signifie qu'ils incluent des variables telles que les identifiants, les noms, etc. Voir ci-dessous. 

Chemins dynamiques

Les chemins dynamiques peuvent inclure des noms et des identifiants ou la variable de votre choix. Vous devez d’abord ajuster votre itinéraire, puis changer votre lien ou vos emplacements en conséquence. 

Changer l'itinéraire en ceci: 

<Route path="/insert/your/path/here/:name" component={YourComponent} />

Remarquez les deux points (:), cela vous permet d’injecter une chaîne ici via variable. 

Mettez à jour votre lien vers ceci: 

<Link to={`/insert/your/path/here/${variableName}`}>hello</Link>

Et si vous utilisez window.open, mettez-le à jour comme suit: 

window.open(`/insert/your/path/here/${variableName}`);

Quelques points à souligner ici. Vous utilisez des crochets après le signe égal parce que cela indique à React, hé, je dois entrer une variable ici. Notez ensuite les tics arrière `ceci indique à React que vous utilisez un littéral de chaîne, ce qui signifie que je veux que vous interprétiez cela comme une chaîne, mais vous devez d’abord obtenir la valeur de ma variable ici et la transformer en chaîne pour moi. Et le $ {} vous permet de placer une variable pour que React puisse l’interpréter correctement. Donc, tous ensemble, réagit lit cette ligne comme suit: amène l’utilisateur au chemin "/ insert/your/path/here/valueOfVariablName", puis React vérifie les routes pour ce chemin et indique que nous avons quelque chose qui est "/ insert/your/path/here /: name "so: name doit être égal à valueOfVariableName. J'espère que cela fait un peu de sens. Vous pouvez vérifier le chemin dynamique dans votre console. Connectez-vous vos accessoires. Vous devriez voir un objet contenant l'emplacement, l'historique, etc. 

Vous pouvez également en savoir plus sur React-Router ici . Lien brut: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

Si quelqu'un a une meilleure ressource. N'hésitez pas à modifier ma réponse ou à laisser un commentaire avec elle. 

J'espère que cela aide tous ceux qui rencontrent cette question. Au fait, vous pouvez également passer de l'état à la Link. S'il vous plaît poster une autre question si vous souhaitez savoir comment faire cela.

2
Bens Steves