ReactRouter 4 重定向到其他路由的主页

Question

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

      <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有问题吗？
除了确切的路径之外，应该如何在任何其他路径上重定向/渲染特定组件？

Answer 1

你必须

用<Switch>包装你的<Route>，以确保只呈现其中一个。

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>