There are several modes for React routing

React routing has two modes, namely: 1. Hash mode, which adds a "#" sign before the path to become a hash value; 2. History mode, which allows the operation of the browser. Session history that has been accessed in tabs or frames.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

React routing

1. What is

In a single-page application, a web project has only one html page. Once the page is loaded, there is no need to reload or jump the page due to user operations. Its features are as follows:

Change the URL and prevent the browser from sending a request to the server

In Dynamically change the URL address in the browser address bar without refreshing the page

It is mainly divided into two modes:

• hash mode: add after the url #, such as http://127.0.0.1:5500/home/#/page1

• ##history mode: allows the operation of the browser's session history that has been accessed in tabs or frames

2. Use

The components corresponding to the hash mode and history mode of React Router are:

HashRouter

BrowserRouter

The use of these two components is very simple, as the top-level component wraps other components, as shown below

// 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. Implementation Principle

Routing describes the mapping relationship between URL and UI. This mapping is one-way, that is, URL changes cause UI updates (no need to refresh the page)

The following uses hash mode as an example. Changing the hash value will not cause the browser to send a request to the server. If the browser does not send a request, it will not refresh the page.

Hash value changes trigger global The hashchange event on the window object. Therefore, hash mode routing uses the hashchange event to monitor changes in the URL, thereby performing DOM operations to simulate page jumps

react-router also implements route jumps based on this feature

The following uses the HashRouter component Analysis and expansion:

HashRouter

HashRouter wraps the entire application,

monitors the hash value through window.addEventListener('hashChange', callback) Change and pass it to its nested components

Then pass the location data to the descendant components through context, as follows:

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

Router What the component mainly does is to match the current value passed through BrowserRouter, the path passed in through props and the pathname passed in context, and then decide whether to execute the rendering component

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;

Recommended learning: "

react video Tutorial》

The above is the detailed content of There are several modes for React routing. For more information, please follow other related articles on the PHP Chinese website!