What are react routes

React routing includes: 1. Page routing, code such as "window.location.href='...'history.back()"; 2. h5 routing, code such as "window.onchange = function ( ) {console.log(window.location.hash)}"; 3. Hash routing, code such as "history.pushState(...)".

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

What are the react routes?

Routing in React

1. Three common routes

(1) Page routing

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

(2) h5 routing

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

(3) hash routing

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

2. React-Router Routing introduction

1. Routing method

：h5 routing

：hash routing

2. Routing rules

: Package component

3. Reason option

: Solve the matching problem, match in order, if it matches to the front The ones behind them don't match.

For example: /path and path/list, path/list will match /path in order, which cannot achieve the desired effect. Add the exact keyword to achieve a complete match, which must be exactly the same. to match.

4. Jump navigation, equivalent to a tag

: Jump page

: Enhanced version of Link

5. Automatic jump

: No need to click, it will automatically jump when the execution reaches this block

3. Use of React-Router

1. Import package

yarn add react-router-dom

import {BrowserRouter, Route, Link} from "react-router-dom";

2. BrowserRouter package

<browserrouter>
    <div>
        <route></route>
        <route></route>
    </div>
</browserrouter>

• component is used to modify the routing page to be jumped. The page content is: Home and Detail are two real components
• path: Matching routing rules
• exact: Modify the matching effect, adding it means exact matching, not adding it means fuzzy matching, for example:
• path={'/'} means matching: http:/ /localhost:3000/, if it is http://localhost:3000/99, it will not match
• path={'/detail/'} means matching: http://localhost:3000/detail/xxxxxxx , the latter is not limited, it will be OK if the previous match is successful

3. Passing value of route

http://localhost:3000/detail

(1) Routing parameter value passing

Routing parameters

Jump parameters:

Receive parameters:

this.props.match.params.id

Print result

3. Directly use

Access results

http://localhost:3000/detail/3

(2) Routing parameter value passing

Routing parameters

Jump parameters:

Receive parameters:

this.props.location.search

Print results

?id=3. Need to parse by yourself

Access result

http://localhost:3000/detail?id=3

4. Jump principle

The to parameter of Link matches the path parameter in Route, then the jump is executed and jumps to the component set in the component in Route.

A picture from the online summary describes it well:

Recommended learning: "react video tutorial"

The above is the detailed content of What are react routes. For more information, please follow other related articles on the PHP Chinese website!