React路由里exact和switch的区别

最新推荐文章于 2025-01-02 10:48:00 发布

落笔~

最新推荐文章于 2025-01-02 10:48:00 发布

阅读量680

点赞数

本文链接：https://blog.csdn.net/weixin_42924369/article/details/118880334

版权

本文详细介绍了React路由中exact属性和Switch组件的区别。exact属性用于实现精确匹配，确保路径完全匹配才能渲染对应的组件。而Switch组件则提供了排他性匹配，当找到第一个匹配的Route时，将停止后续的匹配，从而避免多个组件同时显示。通过这两个概念的结合使用，可以更好地控制React应用的路由行为。

摘要由CSDN通过智能技术生成

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