react路由 react路由

组件有如下属性：

path（string）: 路由匹配路径。（没有path属性的Route 总是会匹配）；
exact（bool）：为true时，则要求路径与location.pathname必须完全匹配；
strict（bool）：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname；

除了Router、Route、Link这三个react路由的基础搭配使用，还有一些其他的比较重要的组件，比如我们在页面切换时，需要进行一些提示，我们就能使用Prompt组件。

1、Prompt组件

【react路由】它有一个必须的属性message，用于给用户提示信息。
基本使用：

这样，每当用户进行切换时，都会提示一条消息。
但是，有时候，我们希望提示消息，有时候我们不希望提示出现，这就用到它的另外一个属性-when。when有两种情况，当它的值是true时，会提示消息。当它的值为false时，不会提示消息。
基本使用方式：

2、Redirect组件

有些时候，我们匹配一个路径，但是可能这个路径，我们更希望它指向一个新的展示界面，而不是它原本的路径匹配界面。
Redirect组件的必须属性是to属性，表示重定向的新地址。

因为你重定向了一个新的地址，所以必须有一个对应的新的地址的Route，来指定重定向的界面。
Redirect组件的基本使用方式：

}/>

可以看出，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 ( this a Home page ) } } class Other extends Component{ render(){ return ( this a Other page ) } } class Main extends Component{ constructor(props){ super(props); this.state = { toast: false, } } render(){ return ( 首页其他页 }/> ) } }render(
,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 ( id:{this.props.match.params.id} ) } }class Main extends Component{ constructor(props){ super(props); } render(){ return ( 首页其他页 ) } } //id就是路径匹配参数。 render(
,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";

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 ( Home ) } } class Other extends Component{ render(){ return ( Other ) } } class Switchs extends Component{ render(){ return ( Switchs test ) } }class Main extends Component{ constructor(props){ super(props); } render(){ return ( 首页其他页 ) } }render(
,document.getElementById("root"));