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的值不为真。

正如我在我的评论中指出的，这取决于你如何获得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>

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

Answer 2

确保在路由器初始化之前设置了'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>