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. Trois routes courantes

(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')

2. Introduction au routage React-Router

1. Méthode de routage

 : routage h5

 : routage de hachage

2. 3. Option de raison

 : résolvez le problème de correspondance, faites la correspondance dans l'ordre, s'il correspond au précédent, il ne correspondra pas.

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

 : Version améliorée de Link

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

import {BrowserRouter, Route, Link} from. "react-router-dom";

2. Le package BrowserRouter

<browserrouter>
    <div>
        <route></route>
        <route></route>
    </div>
</browserrouter>

component est utilisé pour modifier la page de routage à sauter. Le contenu de la page est : Accueil et Détail sont deux composants réels

chemin : règles de routage correspondantes

.

exact : modifier l'effet de correspondance, l'ajouter signifie une correspondance exacte, ne pas l'ajouter signifie une correspondance floue, par exemple :

• path={'/'} signifie une correspondance : http://localhost:3000/, s'il s'agit de http : // Localhost:3000/99 ne peut pas être mis en correspondance
• path={'/detail/'} signifie correspondre : http://localhost:3000/detail/xxxxxxx, ce dernier n'est pas limité et la correspondance précédente est OK
3. Transmission de la valeur de la route
• http://localhost:3000/detail

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