Quelles sont les routes de réaction

1. Trois routes courantes

(1) Routage de page

window.location.href='https://www.hao123.com/'
history.back()

Copier après la connexion

(2) Routage h5

window.location = '#hash'
window.onchange = function () {
    console.log(window.location.hash)
}

Copier après la connexion

(3) Routage de hachage

//推进一个状态
history.pushState('name','title','/path')
//替换一个状态
history.replaceState('name','title','/path')

Copier après la connexion

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>

Copier après la connexion

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

"