时间戳

首页 > 解决方案 > ReactRouter 4 在其他路由上重定向到主页

reactjs - ReactRouter 4 在其他路由上重定向到主页

问题描述

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

标签： reactjsreact-routerreact-router-v4react-router-dom

解决方案

您必须用 s 包装您<Route>的 s<Switch>以确保只有其中一个会被渲染。

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>

推荐阅读