反应路由器 |同一网址中的不同组件答案

【问题标题】：React Router | different component in same url反应路由器 |同一网址中的不同组件
【发布时间】：2018-11-17 09:36:03
【问题描述】：

我正在使用React Router 4.2.0。在我的场景中，我必须在同一个 url 中加载不同的组件。

我有两个组件 Login 和 Dashboard

当我运行 localhost:3000 时，组件应该根据 localstorage 标志加载。

我尝试使用以下代码它显示 404 页面

 <Route path='*' component={NotFound} />
 <Route path="/" render={(props) => {
    if (localStorage.getItem('user')) { 
       return <Dashboard /> 
    }
    else {
       return <Login />
    }
 }} />

【问题讨论】：

最好有单独的登录路径，如果该人未登录，您可以重定向到该路径，查看此答案以了解如何执行身份验证stackoverflow.com/questions/47627818/…

标签： reactjs url react-router

【解决方案1】：

默认情况下，路由以包容的方式匹配（尽可能多）。通配符捕捉一切，如果需要以独占方式在它们之间切换，则需要使用Switch 组件。换句话说：

    <div className="App">
      <Switch>
        <Route path="/" component={Login}/>
        <Route path="*" component={NotFound} exact/>
      </Switch>
    </div>

上面会匹配root上的登录页面，然后回退到404。

【讨论】：