开关有什么作用？

Question

我有以下代码：

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

<Route exact path="/" component={Landing} />
<div className="container">
  <Route path="/register" render={() => (
    <Register {...this.props} />
  )}/>
  <Route path="/login" render={() => (
    <Login {...this.props}/>
  )}/>
  <Switch>
    <PrivateRoute path="/dashboard" component={Dashboard}/>
  </Switch>
  <Switch>
    <PrivateRoute path="/create-profile" component={CreateProfile}/>
  </Switch>

用户登录（使用/login）后，他被重定向到/dashboard。但是，如果我<Switch>从 中删除/dashboard，用户仍然被重定向到/dashboard但该Dashboard组件不会被呈现。

那么它究竟是如何<Switch>工作的呢？

Answer 1

Switch渲染第一个孩子 <Route>或<Redirect>匹配位置。

这与仅使用一堆<Route>s 有何不同？

<Switch>它的独特之处在于它专门呈现一条路线。相比之下，<Route>与位置匹配的每一个都包含渲染。考虑这个代码：

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

如果 URL 是/about，则<About>、<User>和<NoMatch>都将呈现，因为它们都与路径匹配。这是设计使然，它允许我们以<Route>多种方式将s组合到我们的应用程序中，例如侧边栏和面包屑、引导标签等。

然而，有时我们只想选择一个进行渲染。如果我们在，/about我们不想也匹配/:user（或显示我们的“404”页面）。以下是使用 Switch 执行此操作的方法：

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

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

在 react-router文档中阅读更多相关信息