为什么react Router v4 中使用 switch 关键字 ？

在 React Router v4 中使用 <Switch> 组件的原因非常简单但非常重要：
它用来 确保只渲染第一个匹配到的路由，避免多个路由因为模糊匹配而被同时渲染。

为什么需要 <Switch>？

React Router v4 的路由匹配是 模糊匹配（partial match）：

• 只要 path 的前半部分匹配，就会被认为“匹配成功”。

• 所以多个 <Route> 有可能同时匹配同一个 URL。

例如：

<Route path="/user" component={User} />
<Route path="/user/detail" component={UserDetail} />

访问 /user/detail 时：

• /user 匹配成功

• /user/detail 匹配成功

两个组件都会被渲染 —— 这通常不是你想要的效果。

<Switch> 的作用：只渲染第一个匹配的

<Switch>
  <Route path="/user" component={User} />
  <Route path="/user/detail" component={UserDetail} />
</Switch>

访问 /user/detail 时：

1. Switch 从上到下检查

2. /user 匹配成功 → 立刻停止匹配并渲染对应组件

3. /user/detail 不再检查

但你通常希望 /user/detail 优先匹配，所以写法应该是：

<Switch>
  <Route path="/user/detail" component={UserDetail} />
  <Route path="/user" component={User} />
</Switch>

<Switch> 出现的原因（对比 v3）

React Router v3 有“精确匹配”和“嵌套路由”，
v4 改为 组件化路由，不再做路由配置的整体解析，
所以需要 <Switch> 来实现类似传统路由的“单一匹配”功能。

另一个常见用法：处理 404 页面

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route component={NotFound} />   {/* 最后匹配不到就渲染404 */}
</Switch>

总结

功能	说明
单一渲染	只渲染第一个匹配的 <Route>
避免多重渲染	防止多个路由因为模糊匹配而同时渲染
顺序重要	上面的路由优先级更高
404 页面	最后放一个不带 path 的 Route 作为兜底