我有以下代码:
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>
到底如何工作?
提供第一个孩子与位置匹配的<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中了解更多信息>