reactjs - 开关是做什么的?

标签 reactjs react-router-v4

我有以下代码:

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> 到底是怎么做到的呢?工作?

最佳答案

删除 Switch 会将登录和仪表板组件呈现为直接子组件。登录后,您将被重定向到“/dashboard”url,但仪表板不会重新呈现,因为两个路由都匹配此路径。

Switch 组件专门渲染与当前 url 匹配的第一个子路径。

关于reactjs - 开关是做什么的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53267329/

相关文章:

javascript - 使用 React Redux Store 的最佳方式是什么?

reactjs - 有没有办法在 react 路由中隐藏查询字符串中的参数?

reactjs - Cloud Foundry 上的 Nginx 404 页面重新加载

reactjs - 以编程方式导航到不同的路线

reactjs - react history.push 需要 forceRefresh

javascript - React 的 setState 是异步的还是什么?

javascript - 我如何将 React 与 Google Places API 结合使用,以在 Google map 上显示地点标记?

javascript - 在react-router中接受POST请求

reactjs - 如果不需要 propType 为什么 ESLint 要为其提供默认 prop?

javascript - 最后的 'SetItem'不保存,刷新页面时清除