React Router 4 在其他路由上重定向到主页答案

【问题标题】：ReactRouter 4 redirect to Home page on other routsReact Router 4 在其他路由上重定向到主页
【发布时间】：2019-01-02 11:56:01
【问题描述】：

在我的 React 应用程序上，如果用户已登录，我想显示一组组件，如果未登录另一组组件。现在我想将任何其他路径重定向到GuestUsercomponent，这也是确切路径之一。

      <Router>
          <React.Fragment>
            <Header />
            {LoggedIn? (
              <div className="app-content">{this.getRoutes()}</div>
            ) : (
                <div className="app-content">{this.getGuestRoutes()}</div>
            )}
            <Footer />
          </React.Fragment>
        </Router>

Guest Routes 就像

  private getGuestRoutes() {
    return (
      <React.Fragment>
        <Route path={'/:id'} exact component={GuestUser} />
        <Route path={'/:id/policy'} exact component={...}/>
        <Route path={'/:id/signIn'} exact component={...} />
        <Route component={GuestUser} />
      </React.Fragment>
   );}

在许多问题中，我看到编写 <Route component={GuestUser} /> 应该在任何其他路径上呈现 GuestUser 组件，而不是在确切的路径上。但我看到的是GuestUser 组件呈现在每条路径上的其他组件的底部/下方。

React.Fragment 有问题吗？
除了确切路径之外，应如何在任何其他路径上重定向/呈现特定组件？

【问题讨论】：

你能分享一下你的GuestUser组件的完整代码吗？

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

您必须用<Switch> 包裹您的<Route>s，以确保只会呈现其中一个。

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

<Switch>
  <Route path={'/:id'} exact component={GuestUser} />
  <Route path={'/:id/policy'} exact component={...}/>
  <Route path={'/:id/signIn'} exact component={...} />
  <Route component={GuestUser} />
</Switch>

【讨论】：