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页面首先在受保护的路由上呈现

2 个答案: