三、【React-Router5】Switch

纯纯的小白

已于 2022-11-29 13:18:08 修改

阅读量393

点赞数

分类专栏： React 文章标签： react.js javascript 前端 react-router5 switch

于 2022-11-29 11:54:43 首次发布

本文链接：https://blog.csdn.net/qq_30769437/article/details/128095274

版权

React 专栏收录该内容

56 篇文章 2 订阅

订阅专栏

本文探讨了在React应用中使用React-Router5时遇到的路由匹配问题。当path和组件不一对一对应时，路由会遍历所有配置，导致效率下降。为了解决这个问题，引入了`Switch`组件，它能确保路由匹配的效率，实现一对一的映射关系。通过将`Route`组件包裹在`Switch`内，路由匹配将只选择第一个匹配的组件，提高了应用性能。

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

首先优化上节【React-Router5】路由的基本使用代码，去除多余注释和说明内容，使得默认页面如下：

在这里插入图片描述

1、发现问题

以上文代码格式添加一个路由组件 Test，使得 App.js 注册路由写法如下：

<Route path='/about' component={About} />
<Route path='/home' component={Home} />
<Route path='/home' component={Test} />

此时path和组件不是一对一，但是依然可以正常运行，结果如下：

在这里插入图片描述

此时就发现了 Route 匹配机制的问题，它会循环所有的配置，而不是遇到匹配的组件就结束匹配，不仅不能明确一对一的概念，也会有效率问题

2、解决问题

闲言少叙，Switch 闪亮登场！！！**
- 通常情况下，path和component是一一对应的关系
- Switch可以提高路由匹配效率(单一匹配)

import { Route, Switch } from 'react-router-dom'

<Switch>
    <Route path='/about' component={About} />
    <Route path='/home' component={Home} />
    <Route path='/home' component={Test} />
</Switch>