路由上下文、非路由跳转的组件（标签的方式）如何获取路由上下文、exact、404、Switch、Redirect

一、 路由上下文

在react-router里面，如果组件是通过路由跳转的，那么它会把路由相关的API挂在了组件的props上（vue-Router使用的$router和$route），并且分为history，location，match。

history：历史，用来跳转的，并做历史记录。有函数：push()，replace()，go()

location：地址，地址栏上路径，并保存着query，state，search等数据。

match：匹配，匹配到的路径，有params。

二、非路由跳转的组件（标签的方式）如何获取路由上下文

先看一下，组件在页面上展示的两种情况下，props对象的内容

1）、标签名的方式直接展示的组件（没有属性），props是空

2）、路由跳转的方式展示的组件（就算没有属性），props会自动增加属性：history,match,location。

如果用标签名的方式，还想获取到路由上下文，有以下解决方案：

1. 通过属性传递

   首先要求，当前组件是路由跳转过来的，然后把路由上下文通过属性的方式传递给子组件

    <AboutSub02 {...this.props} />
   

2. 通过withRouter包装

   接收路由上下文的组件用withRouter函数（这是一个高阶组件）进行包裹

import {withRouter} from 'react-router-dom'

class 组件 extends Component{
    
}

export default withRouter(组件)

exact属性：

react的路由匹配默认是模糊的，包容的，如果想使用严格匹配，那么，把Route组件的exact属性设置为true。

<Route exact={true} path="/" component={App} />

假如，有如下路由配置：

<BrowserRouter>
    <Route  path="/" component={App} />
    <Route path="/My" component={My}/>
</BrowserRouter>

地址栏中输入：

http://localhost:3000/My

那么路径 “/My”，匹配到的路径是： “/” 和 “/My”，并且，在浏览器会把匹配到的所有组件的内容进行显示。

如果希望 路径 /My 值匹配 path=“/My”，那么，这么写：

404

在路由配置里不设置path属性，那么，就总是会匹配上。404页面就需要这样做（当然还得结合Switch）

<Route component={Error}/> 总是会匹配

Switch

​ 排他性匹配。

​ react默认的路由匹配是包容性的，即：匹配到的多个路由对应的所有组件会同时被显示在页面上。如果只希望显示匹配到的第一个组件（换句话说：匹配到的第一个符合要求的路径后，其它路径就不再做匹配），那么使用switch。

假如，有如下路由配置：

<BrowserRouter>
    <!-- exact={true} 表示地址栏的路径和 / 必须相等 -->
    <Route exact={true} path="/" component={App} />
    <Route path="/My" component={My}/>
    <Route component={Error}/> 总是会匹配
</BrowserRouter>

地址栏中输入：

http://localhost:3000/My

​ 那么路径 “/My”，匹配到的路径是：“/My” 和最后一个，即，在浏览器上从上到下会显示组件My和Error的内容。

路由配置改成如下：

  <BrowserRouter>
    <Switch>
       <Route  exact={true} path="/" component={App} />
       <Route path="/My" component={My}/>
       <Route component={Error}/> 总是会匹配
    </Switch>
  </BrowserRouter>

地址栏中输入：

http://localhost:3000/My

那么路径 “/My”，只会让浏览器显示匹配到的第一个组件My。

区分：exact和switch

excat：表示匹配规则，exact={true} 表地址栏的路径和 路由配置中path一定要完全相等

switch：表示排他性，即：一旦匹配成功后，就不再匹配其它路由

Redirect

<Redirect exact={true} from="/" to="/Home" />