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>