Switch

• 所属模块：react-router-dom
• 导出对象：Switch

介绍

Switch 组件是 react-router-dom 库提供的一个重要组件，用于包裹路由组件，并选择渲染匹配的第一个子路由。它允许我们在路径匹配时渲染单个路由，而不是多个路由。

在一个 Switch 组件中，会遍历所有的子组件并选择第一个匹配的路由进行渲染。如果没有找到匹配的路由，则可以选择渲染一个默认的组件。

特点

• 只渲染与当前路径匹配的第一个子路由组件
• 子路由组件必须被包裹在 Switch 组件中
• 如果没有匹配的路由，可以选择渲染一个默认的组件
• 可约束路由匹配行为的渲染方式
• 支持动态切换路由

使用示例

以下示例展示了如何使用 Switch 组件：

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

function App() {
  return (
    <div className="App">
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/products" component={Products} />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
}

在上面的示例中，我们在 Switch 组件中定义了几个 <Route> 子组件。Switch 会按顺序遍历所有子组件，并渲染与当前路径匹配的第一个子组件。如果没有找到匹配的路径，则会渲染 NotFound 组件。

注意事项

• Switch 只能有直接的 <Route> 子组件，不支持嵌套的 Switch。
• Switch 组件在渲染过程中会自上而下匹配路径，只渲染第一个匹配的路由组件。因此，如果你想要多个路径都匹配并渲染相同组件，你需要手动创建多个 <Route> 组件。
• 如果没有设置 exact 属性，Switch 组件会匹配第一个具有相同路径前缀的路由。
• 如果你想要渲染一个默认的组件（无论路径是否匹配），可以在 Switch 中添加一个没有 path 属性的 <Route> 组件。