React Router 重定向导致页面空白

Question

目前我在ReactJS和路由方面遇到了一个小问题。如果令牌不存在，我希望我的应用程序将重定向回登录界面。应用程序不应具有访问其他页面的权限。如果用户尝试输入无效令牌进行重定向，则应默认返回登录页面。

目前我的代码如下。

import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
        ...

  render() {
    const token = localStorage.getItem('access_token');

    return (
      <BrowserRouter>
        {!token ? <Route render={() => <Redirect push to="/" />} /> :
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/validate" component={ValidateLoginContainer} />
          <Route exact path="/home" component={Landing} />
          <Route exact path="/non-arrivals" component={NonArrivals} />
          <Route exact path="/due-in-summary" component={DueInSummary} />
          <Route exact path="/due-in-forecast" component={DueInForecastDetail} />
          <Route exact path="/hourly-arrivals-departures" component={HourlyArrivalsDepartures} />
          <Route exact path="/overstays" component={Overstays} />
        </Switch>
      }
      </BrowserRouter>
    );
  }

问题在于重定向是成功的，但页面却是空白的。

更新了代码，仍然出现相同的错误：

  <BrowserRouter>
    <Switch>
      <Route render={() => {
            if (!token) {
              return <Redirect push to="/" />;
            }
               return <Redirect push to="/home" />;
           }}
      />

      <Redirect exact from="/" to="/home" />
      <Route exact path="/" component={Login} />
      <Route exact path="/validate" component={ValidateLoginContainer} />
      <Route exact path="/home" component={Landing} />
      <Route exact path="/non-arrivals" component={NonArrivals} />
      <Route exact path="/due-in-summary" component={DueInSummary} />
      <Route exact path="/due-in-forecast" component={DueInForecastDetail} />
      <Route exact path="/hourly-arrivals-departures" component={HourlyArrivalsDepartures} />
      <Route exact path="/overstays" component={Overstays} />
    </Switch>
  </BrowserRouter>

- Raziel

---

有控制台错误吗？ - Milos Mosovsky

@MilosMosovsky 不是的，只是一个警告：您试图将重定向到当前所在的相同路由：“/”。 - Raziel

Answer 1

你现在陷入了一个无限循环中，因为当用户尝试在没有令牌的情况下导航时，你会重定向到/，但是根据你的三元渲染，你只呈现

<Route render={() => <Redirect push to="/" />} />，所以Login组件未定义，您需要将三元运算符更改为始终呈现Login（基本上现在当没有令牌时，你总是返回重定向，这就是为什么你有空白页面，你需要在三元切换中添加登录路由，它应该位于true分支而不是false分支中），或者更改实现方式如下：

authenticatedPage.js

export function authenticatedPage (Component) {
  const componentName = Component.displayName || Component.name || 'Component'

  return class extends React.Component {
    static displayName = `Route(${componentName})`

    renderPage () {
      return (
        <Component {...this.props} />
      )
    }

    render () {
      const token = localStorage.getItem('access_token');
      if (token) {
        return this.renderPage()
      } else {
        return <Redirect to='/login' />
      }
    }
  }
}

index.js

import { authenticatedPage } from './authenticatedPage.js'

      <BrowserRouter>
                <Switch>
                  {/* Authentication Routes */}
                  <Redirect exact from='/' to='/home' />
                  <Route exact path='/login' component={Login} />

                  {/* Authenticated Routes */}
                  <Route exact path='/home' component={authenticatedPage(Landing)} />/> */}
                </Switch>
     </BrowserRouter>

- Milos Mosovsky

---

此处触发：一个<Router>元素只能有一个子元素。 - Raziel

Milos，看看更新后的代码，仍然触发了空白屏幕的问题 :( - Raziel

@MubeenHussain 我已经更新了答案，展示了实现的方式以及如何以正确的方式进行HoC包装。我在本地测试过了。 - Milos Mosovsky