In addition to the basic combination of Router, Route and Link, there are other important components, such as Prompt components, when we switch pages, we need some hints.

1. Prompt components
It has a necessary attribute message to prompt the user.
Basic use:

<Prompt message="Are you sure you want to leave the current page?"/>

In this way, whenever the user switches, a message will be prompted.
Sometimes, however, we want to prompt the message, sometimes we don't want the prompt to appear, which uses another attribute of it - when. When there are two cases, when its value is true, the message is prompted. When its value is false, no message is prompted.
Basic usage mode:

<Prompt when={true} message="Are you sure you want to leave the current page?"/>

2. Redirect components
Sometimes, we match a path, but maybe this path, we prefer it to point to a new display interface, rather than its original path matching interface.

The required attribute of the Redirect component is the to attribute, which represents the new address of the redirection.

<Redirect to='/new-path' />
<Route path='/new-path' component={NewPage}/>

Because you redirect a new address, you must have a corresponding oute for the new address to specify the redirection interface.

Basic usage of Redirect components:

<Route path="/home" render={()=><Redirect to="/other"/>}/>

As you can see, Redirect redirection is a redirection of routing. It should be written in component Route. Generally, render is used to achieve it. The specific examples are as follows:

import React,{ Component } from "react";

import { render } from "react-dom";

import { BrowserRouter as Router, Route, Link, Prompt,Redirect } from "react-router-dom";

class Home extends Component{
    render(){
        return (
            <div>this a Home page</div>
        )
    }
}
class Other extends Component{
    render(){
        return (
            <div>this a Other page</div>
        )
    }
}
class Main extends Component{
    constructor(props){
        super(props);
        this.state = {
            toast: false,
        }
    }
    render(){
        return (
            <Router>
                <div>
                    <ul>
                        <li><Link to="/home">home page</Link></li>
                        <li><Link to="/other">Other pages</Link></li>
                    </ul>

                    <Route path="/home" render={()=><Redirect to="/other"/>}/>
                    <Route path="/other" component={Other}/>
                </div>
            </Router>
        )
    }
}

render(<Main />,document.getElementById("root"));
//In this example, because of redirection, each routing display interface is an other interface

3. match object
match is an object that matches path parameters. It has an attribute params, which contains path parameters. In addition to the commonly used params attributes, it also has url, path, isExact attributes.

Comprehension of match is usually better understood by using examples. Here is an example of this:

import { render } from "react-dom";

import { BrowserRouter as Router, Route, Link, Prompt,Redirect } from "react-router-dom";

class Match extends Component{
    render(){
        return (
            <div>id:{this.props.match.params.id}</div>
        )
    }
}

class Main extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <Router>
                <div>
                    <ul>
                        <li><Link to="/home">home page</Link></li>
                        <li><Link to="/other">Other pages</Link></li>
                    </ul>

                    <Route path="/:id" component={Match}/>
                </div>
            </Router>
        )
    }
}
//id is the path matching parameter.
render(<Main />,document.getElementById("root"));

In component Match, the path matching parameters are obtained through this.props.match.params.id. home page parameter, other pages are other.

Match acquisition method:
In Route component, components are obtained through this.props.match.
In Route render and Route children, it is obtained by passing a parameter.

4. Switch component
Its feature is that we only render the first matched routing component. When rendering the general interface, we render all matched routing components. Its child nodes can only be Route components or Redirect components.

How to use it:

import { Switch } from "react-router-dom";

<Switch>
    <Route path="/" component={Test1} />
    <Route path="/Test" component={Test2} />
</Switch>

Example:

import React,{ Component } from "react";

import { render } from "react-dom";

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

class Home extends Component{
    render(){
        return (
            <div>Home</div>
        )
    }
}
class Other extends Component{
    render(){
        return (
            <div>Other</div>
        )
    }
}
class Switchs extends Component{
    render(){
        return (
            <div>Switchs test</div>
        )
    }
}

class Main extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <Router>
                <div>
                    <ul>
                        <li><Link to="/home">home page</Link></li>
                        <li><Link to="/other">Other pages</Link></li>
                    </ul>
                    <Switch>
                        <Route path="/:id" component={Switchs}/>
                        <Route path="/home" component={Home}/>
                        <Route path="/other" component={Other}/>
                    </Switch>
                </div>
            </Router>
        )
    }
}

render(<Main />,document.getElementById("root"));