Как использовать разные маршрутизаторы в разных компонентах Reactjs?

Question

Прежде всего спасибо за помощь.

Вот моя проблема. Я занимаюсь разработкой веб-приложения, в котором я использую файл с именем UnloggedRoutes, чтобы использовать его, когда пользователь еще не вошел в систему, и ограничить использование приложения.

// Unlogged Routes File
const UnloggedRoutes = () => (
  <Switch>
    <Route path="/" exact component={Root} />
    <Route path="/Route1" exact component={Route1} />
    <Route path="/Route2" exact component={Route2} />
    <Route path="/Route3/:value" component={Route3} />
    <Route path="/Route4" component={Route4} />
    <Route path="/Route5" component={Route5} />
    <Route path="/Route6" component={Route6} />
    <Route component={NotFound} />
  </Switch>
);

export default UnloggedRoutes;

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

// First Try
const Route4 = () => {
  return (
    <>
      <LoggedRoutes />
      <Redirect to="/LoggedRoute1" />
    </>
  );
}

// Second try
const Route4 = () => {
  return (
    <>
      <Redirect to="/app" />
      <div>
        <LoggedRoutes />
      </div>
    </>
  );
}

Код LoggedRoutes похож на UnloggedRoutes (но, очевидно, с другими маршрутами) Также я использую Redirect для проверки, идет ли он по рабочему маршруту

Но в результате получается маршрут NOTFOUND . Ожидаемый результат - LoggedRoute1 View

Если я переместу LoggedRoutes в UnloggedRoutes, я смогу добраться до макета приложения, где я использую другой файл Route в разделе макета (И это работает) .