咨询：React Router中<switch>组件的用途及场景示例

Hey 伙计！作为刚从React Router v5过渡到v6的开发者，我太懂你刚接触<Switch>时的困惑了。先给你把这个东西讲透：

核心用途 #

在React Router v5里，<Switch>的核心作用就是**“只渲染第一个匹配成功的路由”**。如果不用它的话，React Router会把所有路径匹配的组件都渲染出来——这很多时候不是你想要的效果。

举个最直观的对比：

不用<Switch>的情况 #

import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route path="/users" component={UsersList} />
      <Route path="/users/:id" component={UserDetail} />
    </div>
  );
}

当你访问/users/123时，UsersList和UserDetail会同时被渲染，因为/users是/users/123的前缀，默认的匹配规则是“包含匹配”。

用<Switch>的情况 #

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

function App() {
  return (
    <Switch>
      <Route path="/users/:id" component={UserDetail} />
      <Route path="/users" component={UsersList} />
    </Switch>
  );
}

这时候访问/users/123，只会渲染UserDetail——因为<Switch>会从上到下找第一个匹配的路由，找到后就停止了。注意这里要把更具体的路由（带参数的）放在前面哦！

实用场景示例 #

1. 处理404页面 #

这是<Switch>最常用的场景之一。把404路由放在所有路由的最后，当用户访问的路径没有匹配到任何前面的路由时，就会渲染404页面：

import { Switch, Route } from 'react-router-dom';
import Home from './Home';
import Users from './Users';
import NotFound from './NotFound';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route component={NotFound} /> {/* 没有path，会匹配所有未匹配的路径 */}
    </Switch>
  );
}

这里注意exact属性——在v5里，/会匹配所有以/开头的路径，所以需要exact确保只有访问根路径时才渲染Home。

2. 嵌套路由中的精准匹配 #

假设你有一个后台布局组件，里面有侧边栏和内容区，内容区需要根据子路由渲染不同的页面。用<Switch>可以确保内容区只渲染当前匹配的子组件：

// AdminLayout.js
import { Switch, Route, Link } from 'react-router-dom';
import Dashboard from './Dashboard';
import Settings from './Settings';
import Analytics from './Analytics';

function AdminLayout() {
  return (
    <div className="admin-layout">
      <aside>
        <Link to="/admin/dashboard">仪表盘</Link>
        <Link to="/admin/settings">设置</Link>
        <Link to="/admin/analytics">数据分析</Link>
      </aside>
      <main>
        <Switch>
          <Route path="/admin/dashboard" component={Dashboard} />
          <Route path="/admin/settings" component={Settings} />
          <Route path="/admin/analytics" component={Analytics} />
        </Switch>
      </main>
    </div>
  );
}

这样不管点击哪个侧边栏链接，内容区只会显示对应的页面，不会同时渲染多个。

3. 路由优先级控制 #

有时候你需要给某些路由更高的优先级，比如一个特殊的促销页面路径/promo，而你还有一个动态路由/:username（用来匹配用户个人主页）。如果不用<Switch>，访问/promo时，/:username也会匹配（因为promo会被当作username参数）。用<Switch>把/promo放在前面，就能确保它先被匹配：

import { Switch, Route } from 'react-router-dom';
import PromoPage from './PromoPage';
import UserProfile from './UserProfile';

function App() {
  return (
    <Switch>
      <Route path="/promo" component={PromoPage} />
      <Route path="/:username" component={UserProfile} />
    </Switch>
  );
}

现在访问/promo会正确渲染促销页面，而不是用户个人主页。

小提醒：React Router v6的变化 #

如果你用的是最新的React Router v6，<Switch>已经被<Routes>组件取代啦！它的功能更强大，默认就是精准匹配，还支持相对路径：

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/users" element={<UsersList />} />
      <Route path="/users/:id" element={<UserDetail />} />
      <Route path="*" element={<NotFound />} /> {/* 404页面 */}
    </Routes>
  );
}

v6里不用再写exact，也不用特意调整路由顺序（不过更具体的路由还是建议放在前面，逻辑更清晰）。

内容的提问来源于stack exchange，提问作者lokeshj