la façon de naviguer d'une page à l'autre de réagir js?

J'ai deux composants. Dans le premier volet, j'ai un bouton. Cliquez sur le bouton je veux accéder à un autre composant ou d'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'))

OriginalL'auteur user5711656 | 2016-05-18

6

Si vous voulez construire une seule application, je vous conseille d'utiliser Réagir Routeur. Sinon vous pouvez simplement utiliser du Javascript:
```
window.location = 'newUrl';
```
J'ai besoin d'utiliser Réagir Routeur ..pourriez-vous me dire comment l'utiliser ?
Lire les docs et vérifiez les exemples. Si vous avez une question spécifique à créer une nouvelle question ici.
J'ai ajouté routeur js dans mon code plume où je vais l'écriture de la configuration du routeur
codepen.io/naveennsit/stylo/pymqPa?les éditeurs=1010
J'ai ajouté une réponse qui va au-dessus comment le faire en utilisant le routeur.

OriginalL'auteur Lars Graubner
3

Il y a deux approches, à la fois assez facile.

Approche 1: À L'Aide De Réagir Routeur

Assurez-vous d'avoir l'ensemble de la route quelque part dans votre projet. Il devrait contenir cette information à tout le moins: chemin d'accès et le composant. Il convient de définir quelque chose comme ceci:
```
import YourComponent from "./path/of/your/component"; 

<Route path="/insert/your/path/here" component={YourComponent} /> 
```
Prochaine, vous souhaitez mettre à jour votre handleClick fonction pour utiliser une Link de react-router-dom (peut-être installer ce paquet si vous ne l'avez pas déjà à l'aide de npm i react-router-dom).

Supprimer cette (votre handleClick fonction, vous n'en avez pas besoin avec Link):
```
handleClick(){
  alert('---');
}
    render() {
        return <button onClick={this.handleClick}>hello</button>
    }

}
```
Maintenant changer votre méthode de rendu:
```
    render() {
        return (
          <div>
            <Link to="/insert/your/path/here" className="btn btn-primary">hello</Link>
         </div>
       ); 
    }

}
```
Donner Link les mêmes noms de classe que vous le feriez pour votre bouton de sorte qu'il est considéré comme un bouton et pas une balise d'ancrage.

Mettre tous ensemble.

//Où que votre routeur est 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 le handleClick fonction
```
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: À L'Aide De window.open

Toujours assurez-vous d'avoir l'ensemble de la route comme ci-dessus. La différence ici est que vous ne serez pas en utilisant Link ce qui signifie que vous aurez besoin de votre handleClick fonction. Qui sera la seule chose qui change.

Changer cela:
```
handleClick(){
  alert('---');
}
```
:
```
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". 
}
```
Que c'est. Si vous voulez faire de votre chemins dynamique, ce qui signifie qu'ils comprennent des variables telles que l'id du ou des noms etc. Voir ci-dessous.

Dynamique Chemins

Dynamique de trajectoire peut inclure le nom et l'id ou autre variable que vous souhaitez. Vous devez d'abord régler votre itinéraire, puis changer votre Lien ou des emplacements en conséquence.

Modifier l'Itinéraire:
```
<Route path="/insert/your/path/here/:name" component={YourComponent} />
```
Avis le signe deux-points (:), cela vous permet d'injecter une chaîne ici via la variable.

Mise à jour de votre Lien:
```
<Link to={`/insert/your/path/here/${variableName}`}>hello</Link>
```
Et si vous utilisez window.open le mettre à jour comme suit:
```
window.open(`/insert/your/path/here/${variableName}`); 
```
A peu de choses à signaler ici. Vous êtes à l'aide de crochets après le signe égal, car qui dit à Réagir, hey j'ai besoin à l'entrée d'une variable ici. Suivant l'avis le retour des tiques " cela dit Réagissez-vous que vous utilisez une chaîne de caractères littérale qui signifie hé, je veux vous d'interpréter comme une chaîne de caractères, mais de la première à obtenir la valeur de ma variable dans l'ici et le transformer en une chaîne de caractères pour moi. Et le ${} permet de placer une variable afin de Réagir à pouvoir interpréter correctement. Donc, tous ensemble, de réagir lit cette ligne: participez à l'utilisateur de chemin "/insérer/votre/chemin/ici/valueOfVariablName" alors Réagir vérifie les itinéraires pour ce chemin et dit hey, nous avons quelque chose qui est "/insérer/votre/chemin/ici/:nom :nom doit être égale à valueOfVariableName. L'espoir qui fait un peu de sens. Vous pouvez le vérifier dynamique du chemin dans votre console. Journal de vos accessoires. Vous devriez voir un objet qui contient l'emplacement, l'histoire, etc.

Vous pouvez également lire plus à propos de Réagir-Routeur ici. Raw lien: 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 quelqu'un qui vient à travers cette question. Btw, vous pouvez passer l'état à travers la Link. Veuillez poster une autre question si vous voulez savoir comment le faire.

lol je ne peux pas dire aux gens heureux de codage... désolé. merci pour l'edit de Zoé.

OriginalL'auteur Bens Steves

Vous devez vous connecter pour publier un commentaire.