开关做什么?

问题描述 投票:2回答:1

我有以下代码:

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>到底如何工作?

reactjs react-router-v4
1个回答
4
投票
A开关

提供第一个孩子与位置匹配的<Route><Redirect>

与仅使用一堆<Route>有何不同?

<Switch>是唯一的,因为它专门呈现一条路由。相反,与位置匹配的每个<Route>都包含在内。考虑以下代码:

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

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

但是,有时我们只选择一个进行渲染。如果我们位于/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 documentation中了解更多信息>
© www.soinside.com 2019 - 2024. All rights reserved.