React Router Switch маршруты не совпадают

Question

Работа над маршрутизацией на стороне клиента с использованием реакции 16.13.1 и реакции-маршрутизатора 5.1.2 и с некоторыми проблемами маршрутизации.

Сначала у меня есть компонент Switch с несколькими дочерними компонентами Route ( как показано ниже) и все маршруты, как ожидалось. Пути, которые не совпадают ни с одним из моих указанных c маршрутов, переходят к универсальному маршруту.

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/old-match">
    <Redirect to="/will-match" />
  </Route>
  <Route path="/will-match">
    <WillMatch />
  </Route>
  <Route path="*">
    <NoMatch />
  </Route>
</Switch>

Далее я хочу сделать некоторые из маршрутов приватными , чтобы они только регистрировались пользователи могут получить к ним доступ. Я видел несколько примеров пользовательских PrivateRoute компонентов, но когда я их реализую, мне кажется, что каждый раз возникает одна и та же проблема ... любые маршруты, определенные после частного маршрута, никогда не совпадают. Я собрал упрощенную версию своего кода, которая использует переменную isAuthenticated, встроенную для рендеринга некоторых условных компонентов, как показано здесь:

const isAuthenticated = true;

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  {isAuthenticated && (
    <>
      <Route path="/old-match">
        <Redirect to="/will-match" />
      </Route>
      <Route path="/will-match">
        <WillMatch />
      </Route>
    </>
  )}
  <Route path="*">
    <NoMatch />
  </Route>
</Switch>

Маршрут перехвата всех данных никогда не совпадает, потому что он идет после частного фрагмент. Что я здесь не так делаю? У меня есть песочница этого упрощенного примера на https://codesandbox.io/s/react-router-test-fzl22. Любая помощь приветствуется.

Answer 1

Теги фрагмента нарушают оператор Switch. Если вы реорганизуете свой код в:

<Switch>
    <Route exact path="/">
        <Home />
    </Route>
    {isAuthenticated && (
        <Route path="/old-match">
            <Redirect to="/will-match" />
        </Route>
    )}
    {isAuthenticated && (
        <Route path="/will-match">
            <WillMatch />
        </Route>
    )}
    <Route path="*">
        <NoMatch />
    </Route>
</Switch>

, код работает нормально.

Вы можете увидеть, как это работает на развилке вашей песочницы здесь .

Answer 2

Попробуйте использовать троичный оператор вместо операции And

const isAuthenticated = true;

<Switch>
<Route exact path="/">
<Home />
</Route>
{isAuthenticated ? (
<>
  <Route path="/old-match">
    <Redirect to="/will-match" />
  </Route>
  <Route path="/will-match">
    <WillMatch />
  </Route>
</>
:
<Route path="*">
<NoMatch />
</Route>
)