React Router - 404 页面首先在受保护的路由上呈现

Question

我有 /control-panel 页面保护，但是当我转到 /control-panel 页面时，第 404 页先呈现然后加载页面，知道如何修复吗？

代码：

  <Switch>
    <Route exact path='/' component={HomePage} />
    <Route exact path='/help' component={FAQ} />

    {admin ? <PrivateRoute authed={userSignedIn} path="/control-panel" exact component={ControlPanel} /> : null}

    <Route component={NoMatch} />
  </Switch>

更新为：

{!my_protected_urls.includes(window.location.pathname) && <Route component={NoMatch} />}

Answer 1

确保在路由器初始化之前设置 'admin' 值，并且试试这个。

<Switch>
  <Route exact path='/' component={HomePage} />
  <Route exact path='/help' component={FAQ} />

  {admin ? <PrivateRoute authed={userSignedIn} path="/control-panel" exact component={ControlPanel} /> : null}

  <Route component={NoMatch} />
</Switch>

Answer 2

这是因为在执行此代码之前 admin 的值不正确。

正如我在评论中指出的那样，这取决于您如何获得 admin

的价值

但是，针对这种情况的更简单的解决方法是使用 pathname。

试试这个：

<Switch>
    <Route exact path='/' component={HomePage} />
    <Route exact path='/help' component={FAQ} />

    {admin ? <PrivateRoute authed={userSignedIn} path="/control-panel" exact component={ControlPanel} /> : null}

    {window.location.pathname!=='/control-panel' && <Route component={NoMatch} />}
  </Switch>

这应该可以解决您的问题。干杯！！

React Router - 404 页面首先在受保护的路由上呈现

React Router - 404 page renders first on protected route

reactjs

react-router-v4