React路由里exact和switch的区别

React路由里exact和switch的区别

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”，那么，这么写：<Route exact={true} path="/" component={App} />

Switch：排他性匹配

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

路由配置改成如下：

  <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：表示排他性，即：一旦匹配成功后，就不再匹配其它路由