Heim >Web-Frontend >Front-End-Fragen und Antworten >Es gibt verschiedene Modi für das React-Routing

Es gibt verschiedene Modi für das React-Routing

WBOY
WBOYOriginal
2022-04-19 10:03:205202Durchsuche

React Routing verfügt über zwei Modi: 1. Hash-Modus, der ein „#“-Zeichen vor dem Pfad hinzufügt, um einen Hash-Wert zu erhalten; 2. Verlaufsmodus, der die Bedienung der vorherigen Registerkarten des Browsers oder des Sitzungsverlaufs ermöglicht Der Rahmen.

Es gibt verschiedene Modi für das React-Routing

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

React Routing

1. Was ist

In einer Single-Page-Anwendung hat ein Webprojekt nur eine HTML-Seite. Sobald die Seite geladen ist, ist es nicht erforderlich, die Seite neu zu laden oder zu springen Benutzeroperationen. Die Eigenschaften lauten wie folgt:

Ändern Sie die URL, ohne dass der Browser eine Anfrage an den Server sendet.

Ändern Sie die URL-Adresse in der Adressleiste des Browsers dynamisch, ohne die Seite zu aktualisieren.

Es ist hauptsächlich in zwei Bereiche unterteilt Modi:

  • Hash-Modus: Fügen Sie # nach der URL hinzu, z. B. http://127.0.0.1:5500/home/#/page1

  • History-Modus: Ermöglichen Sie die Ausführung der Sitzung des Browsers, die bereits stattgefunden hat Zugriff auf der Registerkarte oder im Rahmen Verlauf

2. Verwenden Sie

Die Komponenten, die dem Hash-Modus und dem Verlaufsmodus von React Router entsprechen, sind:

HashRouter

BrowserRouter

Die Verwendung dieser beiden Komponenten ist sehr einfach, da die Komponente der obersten Ebene andere Komponenten umschließt, wie unten gezeigt

// 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. Implementierungsprinzip

Routing beschreibt die Zuordnungsbeziehung zwischen URL und Benutzeroberfläche. Diese Zuordnung ist einseitig Das heißt, URL-Änderungen führen zu Aktualisierungen der Benutzeroberfläche (keine Aktualisierung der Seite erforderlich)

Im Folgenden wird der Hash-Modus als Beispiel verwendet. Wenn der Browser keine Anfrage sendet, sendet er den Hash-Wert nicht Wenn Sie eine Anfrage stellen, wird die Seite nicht aktualisiert.

Hash-Wertänderungen lösen das globale Fensterobjekt aus. Daher verwendet das Routing im Hash-Modus das Hashchange-Ereignis, um Änderungen in der URL zu überwachen und dabei DOM-Operationen durchzuführen, um Seitensprünge zu simulieren. React-Router implementiert auch Routensprünge basierend auf dieser Funktion. Im Folgenden wird die Analyse der HashRouter-Komponente erweitert :

HashRouter

HashRouter umschließt die gesamte Anwendung, überwacht Änderungen der Hash-Werte über window.addEventListener('hashChange', Callback) und übergibt sie an seine verschachtelten Komponenten.

Übergibt dann die Standortdaten an Nachkommenkomponenten durch Kontext, wie folgt:

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

Router

Die Hauptaufgabe der Router-Komponente besteht darin, den über den BrowserRouter übergebenen aktuellen Wert, den über Requisiten übergebenen Pfad und den im Kontext übergebenen Pfadnamen abzugleichen und dann Entscheiden Sie, ob die Rendering-Komponente ausgeführt werden soll.

import React, { Component } from &#39;react&#39;;
import { Consumer } from &#39;./context&#39;
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;
Empfohlenes Lernen: „

Video-Tutorial reagieren

Das obige ist der detaillierte Inhalt vonEs gibt verschiedene Modi für das React-Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn