除了Router、Route、Link這三個react路由的基礎搭配使用，還有一些其他的比較重要的元件，比如我們在頁面切換時，需要進行一些提示，我們就能使用Prompt元件。

1、Prompt元件
它有一個必須的屬性message，用於給使用者提示資訊。
基本使用：

<Prompt message="您確定您要離開當前頁面嗎？"/>

這樣，每當使用者進行切換時，都會提示一條訊息。
但是，有時候，我們希望提示訊息，有時候我們不希望提示出現，這就用到它的另外一個屬性-when。when有兩種情況，當它的值是true時，會提示訊息。當它的值為false時，不會提示訊息。
基本使用方式：

<Prompt when={true} message="您確定要離開當前頁面嗎？"/>

2、Redirect元件
有些時候，我們匹配一個路徑，但是可能這個路徑，我們更希望它指向一個新的展示介面，而不是它原本的路徑匹配介面。

Redirect元件的必須屬性是to屬性，表示重定向的新地址。

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

因為你重定向了一個新的地址，所以必須有一個對應的新的地址的Route，來指定重定向的介面。

Redirect元件的基本使用方式：

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

可以看出，Redirect重定向是路由的重定向，應該寫在元件Route中，一般使用render來實現它，具體例項如下：

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">首頁</Link></li>
                        <li><Link to="/other">其他頁</Link></li>
                    </ul>

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

render(<Main />,document.getElementById("root"));
//這個例項中，因為重定向，所以每個路由展示介面都是other介面

3、match物件
match是一個匹配路徑引數的物件，它有一個屬性params，裡面的內容就是路徑引數，除常用的params屬性外，它還有url、path、isExact屬性。

match的理解，通常使用示例會更好理解一點，下面這就給出這樣的一個示例：

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">首頁</Link></li>
                        <li><Link to="/other">其他頁</Link></li>
                    </ul>

                    <Route path="/:id" component={Match}/>
                </div>
            </Router>
        )
    }
}
//id就是路徑匹配引數。
render(<Main />,document.getElementById("root"));

在元件Match中，通過this.props.match.params.id獲取了路徑的匹配引數。首頁引數home，其他頁是other。

Match的獲取方式：
在Route component中，元件通過this.props.match獲取。
在Route render 和Route children中，通過傳遞一個引數的方式獲取。

4、Switch元件
它的特性是我們只渲染所匹配到的第一個路由元件，一般介面渲染的時候，會渲染所有匹配到的路由元件。它的孩子節點只能是Route元件或者Redirect元件。

使用方式：

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

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

示例：

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">首頁</Link></li>
                        <li><Link to="/other">其他頁</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"));