Maison > Article > interface Web > Quelles sont les routes de réaction
Le routage React comprend : 1. Le routage des pages, un code tel que "window.location.href='...'history.back()" ; 2. Le routage h5, un code tel que "window.onchange = function () { console.log(window.location.hash)}"; 3. Routage de hachage, code tel que "history.pushState(...)".
L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.
Quelles sont les voies de réaction ?
Routage dans React
(1) Routage de page
window.location.href='https://www.hao123.com/' history.back()
(2) Routage h5
window.location = '#hash' window.onchange = function () { console.log(window.location.hash) }
(3) Routage de hachage
//推进一个状态 history.pushState('name','title','/path') //替换一个状态 history.replaceState('name','title','/path')
1. Méthode de routage
2. 3. Option de raison
Par exemple : /path et path/list. Dans l'ordre, path/list correspondra à /path, ce qui ne peut pas obtenir l'effet souhaité. Ajoutez le mot-clé exact pour obtenir une correspondance complète.
4. Navigation par saut, équivalent à une balise
: Jump page
5. Pas besoin de cliquer, il sautera automatiquement lors de l'exécution de ce bloc
3. Utilisation de React-Router
1 Import package
yarn addreact-router-domimport {BrowserRouter, Route, Link} from. "react-router-dom";
2. Le package BrowserRoutercomponent est utilisé pour modifier la page de routage à sauter. Le contenu de la page est : Accueil et Détail sont deux composants réelschemin : règles de routage correspondantes<browserrouter> <div> <route></route> <route></route> </div> </browserrouter>
.
exact : modifier l'effet de correspondance, l'ajouter signifie une correspondance exacte, ne pas l'ajouter signifie une correspondance floue, par exemple :(1) Transmission de la valeur du paramètre de routage
Paramètre de la route
Paramètres de saut :
Paramètres de réception :
this.props.match.params.id
Imprimer le résultat
3. Utilisez directement
Accédez aux résultats
http://localhost:3000/detail/3
(2) Passage de la valeur du paramètre de routage
Paramètres de routage
Paramètres de saut :
Paramètres de réception :
this.props.location.search
Résultat d'impression
?id=3. Vous devez l'analyser vous-même
Accéder aux résultats
http://localhost:3000/detail?id=3
4. Principe du saut
Le lien vers le paramètre correspond au paramètre de chemin dans la route, puis le saut est exécuté, passez au composant défini dans le composant dans Route. Une photo du résumé en ligne le décrit bien :Apprentissage recommandé : "
tutoriel vidéo React
"Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!