Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points of React routing pattern, which are detailed and logical. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

There are two modes of React routing. They are: 1, hash mode, which adds a "#" sign in front of the path to become a hash value; 2, history mode, which allows you to manipulate the browser's session history that has been accessed in tabs or frames.

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

React routing

First, what is it?

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 because of the user's actions. The features are as follows:

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 url, such as http://127.0.0.1:5500/home/#/page1

History mode: session history that allows you to manipulate browsers that have been accessed in tabs or frames

2. Use

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

HashRouter

BrowserRouter

Both components are easy to use, wrapping other components as top-level 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 ();} export default App

Third, the realization principle

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

Let's take the hash mode as an example. Changing the hash value does not cause the browser to send a request to the server. If the browser does not make the request, the page will not be refreshed.

The hash value changes, triggering the hashchange event on the global window object. So hash mode routing is to use hashchange events to listen for changes in URL, and then perform DOM operations to simulate page jumps.

React-router is also based on this feature to achieve routing jump.

The following is expanded with HashRouter component analysis:

HashRouter

HashRouter wraps the whole application

Listen for changes in hash values through window.addEventListener ('hashChange',callback) and pass them to its nested components

Import React, {Component} from 'react' Import {Provider} from'. / context'// under this component Api is provided to sub-components using class HashRouter extends Component {constructor () {super () this.state = {location: {pathname: _ window.location.hash.slice (1) | |'/'} / / url path change 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 ({this.props.children}) }} export default HashRouter

Router

What the Router component mainly does is the current value passed through BrowserRouter, the path passed in through props matches the pathname passed in by context, and then decides 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 ({state = > {console.log (state) let {path, component: Component} = this.props let pathname = state.location.pathname let reg = pathToRegexp (path, [] {end: false}) / / determine whether the current path contains pathname if (pathname.match (reg)) {return} return null}}) }} export default Route; above is all the content of this article "what are React routing patterns?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.