<switch> 在 React Router 中到底有什么用？

Question

我是 React 学习的新手，正在尝试使用 react-router-dom 构建一个应用程序。当我遇到术语 'switch' 时，我能够实现基本路由。任何人都可以用我们使用 switch 的用例示例向我解释一下吗？

Answer 1

Switch 遍历 Route 的 children 并渲染第一个匹配当前路径的其他比赛。

Answer 2

由于您是新手，我将花更多时间通过示例进行解释，并添加一些您可能希望方便使用的内容。

正如 Iddler 所说，Switch 或多或少类似于任何其他语言中的 "Switch case" 条件，但通常以它找到的第一个匹配项结束。

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

这是其最基本用法的示例。开关确定块或条件的开始和结束。每个 Route 检查当前路径。假设我们正在研究 "www.test.com"。所有的"www.test.com"都是根“/”。因此 Route 检查根之后的路径。因此，如果您有 "www.test.com/home"，“/home”位于根之后，因此 "Home" 组件将在我们上面的示例中加载，如果您有 "www.test.com/about"，则 "About" 组件是已加载。

请注意，您可以使用任何名称。组件和路径不需要相同。

在某些情况下，您可能希望使用 exact 来匹配精确路径。当您有相似的路径时，这很有用。例如“/shop”和“/shop/shoes”。使用 exact 确保 Switch 匹配准确的路径，而不仅仅是第一个。

例如：

<Switch>
    <Route exact path="/shop" component={Shop} />
    <Route exact path="shop/shoes" component="{Shoes} />
</Switch>

您也可以在不使用 <Switch> 的情况下使用 <Route... />。

例如：

<Route path="/home" component={Home} />

所以不像直接组件加载，你只加载一个组件，比如 <Home /> 路由器使用 URLs。

最后，<Route... /> 路径可以使用 url 的数组来加载相同的组件。

例如：

<Switch>
    <Route path={[ "/home", "/dashboard", "/house", /start" ]} component={Home} />
    <Route exact path={[ "/about", "/about/management", "/about/branches" ]} component="{About} />
</Switch>

希望对您有所帮助。如果您需要任何形式的说明，请告诉我。 :)

更新：

您不必总是以相同的格式编写路由器。以下是您可以使用的另一种格式；

<Router>
    <Switch>
      <Route path="/home">
        <Home />
      </Route>
      <Route path="/about">
        <About />
      </Route>
    </Switch>
</Router>

现在有像 am 这样的实例，您希望能够处理输入错误 URL 时显示的内容。像一个 404 页面。您可以在没有路径的情况下使用 Router。所以就像常规的 switch 语句一样，它成为你的默认值。

<Switch>
    <Route path="/home" component={Home} />
    <Route path="/about" component="{About} />
    <Route component="{PageNotFound} />
</Switch>

Answer 3

Switch 组件的工作方式与 Router 组件的工作方式大致相同，这意味着我们仍将拥有需要精确路径等的嵌套 Route 组件。 Switch 的附加功能是它只会呈现第一个匹配的子项。当我们有如下嵌套路由时，这真的很方便：

<Switch>
<Route path="/accounts/new" component={AddForm} />
<Route path={`/accounts/:accountId`} component={Profile} />
</Switch>

假设我们将上面的代码放在一个组件中——我们会看到 {AddForm} 和 {Profile} 都会呈现，因为“/accounts/new”可能看起来像是路由到 Router 组件。路由器组件包含所有路由匹配项。 Switch 组件将呈现完全匹配，并且仅呈现完全匹配。这使其成为这些嵌套场景的理想选择。

<switch> 在 React Router 中到底有什么用？

What exactly is <switch> used for in React Router?

javascript

reactjs

react-router-v4