react routing

Route in react:

The core module of routing in react-router React

react-router-dom The routing in React contains react-router in the module react-router-dom used on the browser side

When react-router-native is in RN, the routing module React-Native used is used as a native APP

安装：npm i react-router-dom -S

It is a third-party module, not officially provided by React.
Reference website:
https://reactrouter.com/web/guides/quick-start

https://serializedowen.com/docs/react-router-dom/%E5%90%91%E5%AF%BC/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

http://react-guide.github.io/react-router-cn/docs/Introduction.html

Routing:
One url corresponds to one component.

1) Import routes

// Route 路由的出口，兼路由的规则   也是一个组件
// Router Route放在Router中  规定死的  是一个组件
// Link 类似于vue中的router-link 
import {
    
     Route, BrowserRouter as Router,Link } from "react-router-dom"

2) Use

    render() {
    
    
        return (
           <Router>
              <Link to="/index">首页</Link>  &nbsp;&nbsp;
              <Link to="/movie">电影</Link>  &nbsp;&nbsp;
              <Link to="/threater">影院</Link>  &nbsp;&nbsp;
              <div>
                  {
    
    /* Route表示路由的出口(是规则，也是出口)  类似于vue中的router-view */}
                  <Route path="/index" component={
    
     Index }></Route>
                  <Route path="/movie" component={
    
     Movie }></Route>
                  <Route path="/threater" component={
    
     Threater }></Route>
              </div>
           </Router>
        )
    }

Other forms of route jump

1）

// 定义一个实现跳转的组件
const CustomLink = (props)=>{
    
    
    return (
        <li>
            <Link to={
    
    props.path}>{
    
    props.name}</Link>
        </li>
    )
}

use:

<CustomLink path="/" name="首页" />

2) NavLink : You can add styles

<NavLink to="/cart" activeClassName="selected">购物车</NavLink>

3) Programmatic navigation
can only pass history, location, match to the corresponding components only if Route component is configured.
Now withRouter(Mine)history, location, match should be used, what should I do? Answer: withRouter
programmatic routingthis.props.history.push(this.props.path)

switch, Redirect, strict match

One,

1. It is not necessary to write component in Route component
2. A route will match multiple outlets by default, such as: /movie/hotshowing It matches two outlets, one is "/movie/hotshowing", and the other is "/movie/"
3. Goal: I just want to match an outlet, the first one is matched, and then don’t match later, you can use the Switch component at this time
4. Put all the outlets in the Switch, then only the first one will be matched.
   For example:

<Switch>
    <Route path="/movie/hotshowing">
        <h1>正在热映</h1>
    </Route>
    <Route path="/movie/commingsoon">
        <h1>即将上映</h1>
    </Route>
    <Route path="/movie/">
        <h1>正在热映</h1>
    </Route>
</Switch>

two,

1. exact="true" means that the strict matching URL needs to be exactly the same as the path length, true may not be written
2. Redirection component:<Redirect from="/" to="/index"></Redirect>
3. path is not written, the default is path="*"

Two forms of routing parameters

You can print this.props directly in the component to get the parameter
param. Passing parameters:
Passing parameters:

<Route exact path="/threater/:id" component={
    
     Threater }></Route>

receive:

this.props.match.params.id

Query pass parameters: ?name='wc'&age=100 Call query string
pass parameters:

<Redirect exact from="/" to="/index?name='wc'&age=100"></Redirect>

Receive:
first new a URLSearchParams

let result = new URLSearchParams(this.props.location.search)
console.log(result.get("name"));

Note: usexxxx cannot be used in class components

Routing guard

<Route exact path="/cart" render={
    
     ()=>{
    
    
    return this.state.isLogin ? <Cart /> :<Login dealLogin={
    
     e=>this._dealLogin(e) }></Login>
 } }></Route>