Маршрутизатор React с несколькими коммутаторами, отображающий только компоненты первого коммутатора

Question

Я работаю над приложением React и столкнулся с проблемой, описанной ниже.

Это мой основной компонент Route с разными макетами, поэтому я структурировал его следующим образом. Файл PublicRoutes выглядит следующим образом:

const PublicRoutes = () => {
  return (
    <Switch>
      <Route path="/login" component={SignIn}></Route>
      <Route path="/signup" component={SignUp}></Route>
      <Route path="/confirm/:token?" component={ConfirmEmail}></Route>
      <Route
        path="/complete-your-profile"
        component={CompleteYourProfile}
      ></Route>
      <Route path="/forgot-password" component={ForgotPassword}></Route>
      <Route path="/reset-password/:token?" component={ResetPassword}></Route>
    </Switch>
  );
};

Это второй файл маршрута с коммутатором

const PostRegistraionRoutes = () => {
  return (
    <Switch>
      <Route path="/pricing-plans" component={PricingPlans}></Route>
      <Route
        path="/payment-success/:subscription_id/:invoice_id"
        component={PaymentSuccess}
      ></Route>
    </Switch>
  );
};

export default PostRegistraionRoutes;

Файл AuthLayout

interface ChildrenProp {
  children: ReactChild | ReactChildren;
}
const AuthRoute = ({ children }: ChildrenProp) => {
  const { state: AuthState } = useContext(AuthContext);

  return (
    <>
      {AuthState.isAuthenticated === false && <>{children}</>}
      {AuthState.isAuthenticated !== false && (
        <>
          <Redirect to="/" />
        </>
      )}
    </>
  );
};
export default AuthRoute;

PostRegistrationLayout также почти аналогичен, поэтому не публикуется код для этого.

Моя проблема в том, что я могу просто видеть маршруты из одного файла: маршруты AuthRoutes или PostRegistration. Тот, который я держу в верхней части файла основных маршрутов, работает. Если в основном файле я помещаю PostRegistrationRoute выше AuthRoutes, тогда он начинает рендеринг PostRegistrationRoute и показывает пустую страницу для AuthRoutes.

Использование React Router v5

Пожалуйста, помогите в решении проблемы или предложите идею для то же

Answer 1

Ну, это была глупая ошибка, но если кто-то еще столкнется с подобной ситуацией, ваши основные маршруты должны быть в одном маршруте, как показано ниже

export const AppRoutes = () => {
  return (
    <Switch>
      <Route>
        <AuthRoute>
          <PublicRoutes />
        </AuthRoute>
        <PostRegistrationRoute>
          <PostRegistraionRoutes />
        </PostRegistrationRoute>
        <PrivateRoute>
          <DashboardRoutes />
        </PrivateRoute>
      </Route>
    </Switch>
  );
};