在 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 时：
-
Switch 从上到下检查
-
/user 匹配成功 → 立刻停止匹配并渲染对应组件
-
/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 作为兜底 |