React Router 中 到底有什么用？

我是 React 学习的新手，并尝试使用react-router-dom 构建一个应用程序。当我遇到“交换机”这个术语时，我能够实现基本的路由。谁能用我们使用 switch 的用例示例向我解释一下它的用途是什么？

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

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

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

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

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

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

Eg:

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

您还可以使用<Route... />没有<Switch>.

Eg:

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

所以与直接组件加载不同，您只需加载一个组件，例如<Home />路由器使用 URL。

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

Eg:

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

我希望这有帮助。如果您需要任何类型的说明，请告诉我。 :)

UPDATE:

您并不需要始终以相同的格式编写路由器。以下是您可以使用的另一种格式；

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

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

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