Question

我是React学习的新手，并且正在尝试使用react-router-dom构建一个应用程序。当我遇到“交换机”一词时，我便能够实现基本路由。任何人都可以用一个使用开关的用例示例来向我解释一下，它的用途是什么？

Answer 1

由于您是新手，因此将花费更多时间来解释示例，并添加一些有关它的方便之处。

因此，就像爱德勒所说的那样，Switch或多或少类似于任何其他语言中的“ Switch case”条件，但通常以找到的第一个匹配项结束。

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

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

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

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

例如：

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

您也可以不使用<Route... />来使用<Switch>。

例如：

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

与直接加载组件不同，在直接加载组件中，您仅加载<Home />之类的组件，路由器使用URL。

最后，<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 2

Switch 会遍历 Route的子级，并渲染与当前路径匹配的第一个子节点，一旦找到，它将不再寻找其他匹配项。

<switch>在React Router中到底是用来做什么的？

2 个答案: