Il existe plusieurs modes de routage React

Le routage React a deux modes, à savoir : 1. Le mode Hash, qui ajoute un signe "#" avant le chemin pour devenir une valeur de hachage ; 2. Le mode Historique, qui permet d'exploiter les onglets précédents du navigateur ou l'historique de la session accessible dans. le cadre.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Routage React

1. Qu'est-ce que

Dans une application monopage, un projet Web n'a qu'une seule page html Une fois la page chargée, il n'est pas nécessaire de recharger ou de sauter la page à cause de. opérations utilisateur. Transfert, ses caractéristiques sont les suivantes :

Changer l'URL sans laisser le navigateur envoyer une requête au serveur

Changer dynamiquement l'adresse URL dans la barre d'adresse du navigateur sans actualiser la page

Il est principalement divisé en deux modes :

• mode hash : ajoutez # après l'url, tel que http://127.0.0.1:5500/home/#/page1

• mode historique : permet le fonctionnement des sessions du navigateur auxquelles vous avez accédé dans des onglets ou des cadres Historique

2. Utiliser

Les composants correspondant au mode hachage et au mode historique de React Router sont :

HashRouter

BrowserRouter

L'utilisation de ces deux composants est très simple , comme le plus Le composant de niveau supérieur enveloppe d'autres composants, comme indiqué ci-dessous

// 1.import { BrowserRouter as Router } from "react-router-dom";
// 2.import { HashRouter as Router } from "react-router-dom";
 
import React from 'react';
import {
  BrowserRouter as Router,
  // HashRouter as Router  
  Switch,
  Route,
} from "react-router-dom";
import Home from './pages/Home';
import Login from './pages/Login';
import Backend from './pages/Backend';
import Admin from './pages/Admin';
 
 
function App() {
  return (
    <Router>
        <Route path="/login" component={Login}/>
        <Route path="/backend" component={Backend}/>
        <Route path="/admin" component={Admin}/>
        <Route path="/" component={Home}/>
    </Router>
  );
}
 
export default App;

3. Principe de mise en œuvre

Le routage décrit la relation de mappage entre l'URL et l'interface utilisateur. Ce mappage est unidirectionnel, c'est-à-dire l'URL. les modifications entraînent des mises à jour de l'interface utilisateur (pas besoin d'actualiser la page)

Ce qui suit utilise le mode de hachage comme exemple. La modification de la valeur de hachage n'entraînera pas l'envoi d'une requête au serveur. Si le navigateur n'envoie pas de requête, il le fera. ne rafraîchira pas la page.

Les modifications de la valeur de hachage déclenchent l'événement de hachage global de l'objet fenêtre. Par conséquent, le routage en mode hachage utilise l'événement hashchange pour surveiller les modifications dans l'URL, effectuant ainsi des opérations DOM pour simuler des sauts de page

react-router implémente également des sauts d'itinéraire basés sur cette fonctionnalité

Ce qui suit est développé sur l'analyse du composant HashRouter :

HashRouter

HashRouter enveloppe l'intégralité de l'application,

surveille les modifications des valeurs de hachage via window.addEventListener('hashChange', callback) et la transmet à ses composants imbriqués

transmet ensuite les données de localisation à composants descendants via le contexte, comme suit ：

import React, { Component } from 'react';
import { Provider } from './context'
// 该组件下Api提供给子组件使用
class HashRouter extends Component {
  constructor() {
    super()
    this.state = {
      location: {
        pathname: window.location.hash.slice(1) || '/'
      }
    }
  }
  // url路径变化 改变location
  componentDidMount() {
    window.location.hash = window.location.hash || '/'
    window.addEventListener('hashchange', () => {
      this.setState({
        location: {
          ...this.state.location,
          pathname: window.location.hash.slice(1) || '/'
        }
      }, () => console.log(this.state.location))
    })
  }
  render() {
    let value = {
      location: this.state.location
    }
    return (
      <Provider value={value}>
        {
          this.props.children
        }
      </Provider>
    );
  }
}
 
export default HashRouter;

Router

La principale chose que fait le composant Router est de faire correspondre la valeur actuelle transmise par BrowserRouter, le chemin transmis via les accessoires et le nom de chemin transmis dans le contexte, puis décidez si vous souhaitez exécuter le composant de rendu

import React, { Component } from 'react';
import { Consumer } from './context'
const { pathToRegexp } = require("path-to-regexp");
class Route extends Component {
  render() {
    return (
      <Consumer>
        {
          state => {
            console.log(state)
            let {path, component: Component} = this.props
            let pathname = state.location.pathname
            let reg = pathToRegexp(path, [], {end: false})
            // 判断当前path是否包含pathname
            if(pathname.match(reg)) {
              return <Component></Component>
            }
            return null
          }
        }
      </Consumer>
    );
  }
}
export default Route;

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!