Блог

Это все мои пути, и я хотел бы, чтобы они работали:

 export enum RoutesPath {
  HomePage = '/',
  PaymentFailedPage = '/finish/payment-failed',
  PaymentSuccessfulPage = '/finish/payment-successful',
  LoginPage = '/login',
  ResetPasswordPage = '/reset-password',
  DashboardPage = '/dashboard',
  NotFoundPage = '/404',
  UnsubscribePage = '/unsubscribe/:email?',
  SettingsPage = '/settings',
  TrainingPage = '/training/:training?',
  CheckoutPage = '/checkout/:uuid?',
  RegulationsPage = '/legal/regulations',
  PrivacyPolicyPage = '/legal/privacy-policy',
}
  

Мой app.js выглядит так:

 export function App() {
  useInjectReducer({ key: sliceKey, reducer: reducer });
  useInjectSaga({ key: sliceKey, saga: appSaga });

  return (
    <>
      <Helmet
        titleTemplate="%s | React Boilerplate"
        defaultTitle="React Boilerplate"
      >
        <meta name="description" content="A React Boilerplate application" />
      </Helmet>

      <Switch>
        <Route exact path={RoutesPath.HomePage} component={HomePage} />
        <Route path={RoutesPath.LoginPage} component={LoginPage} />
        <Route
          exact
          path={RoutesPath.ResetPasswordPage}
          component={ResetPasswordPage}
        />
        <Route
          exact
          path={RoutesPath.UnsubscribePage}
          component={UnsubscribePage}
        />
        <Route exact path={RoutesPath.CheckoutPage} component={CheckoutPage} />

        <Route
          path={RoutesPath.PaymentSuccessfulPage}
          component={PaymentSuccessfulPage}
        />
        <Route
          path={RoutesPath.PaymentFailedPage}
          component={PaymentFailedPage}
        />
        <Route path={RoutesPath.NotFoundPage} component={NotFoundPage} />

        <LegalPage> //here is {children} !!
          <Switch>
            <Route
              path={RoutesPath.PrivacyPolicyPage}
              component={PrivacyPolicyPage}
            />

            <Route
              path={RoutesPath.RegulationsPage}
              component={RegulationsPage}
            />

            <Redirect to={RoutesPath.NotFoundPage} />
          </Switch>
        </LegalPage>

        <Layout> //here is {children} !!
          <Switch>
            <Route
              exact
              path={RoutesPath.DashboardPage}
              component={DashboardPage}
            />

            <Route
              exact
              path={RoutesPath.TrainingPage}
              component={TrainingPage}
            />

            <Route
              exact
              path={RoutesPath.SettingsPage}
              component={SettingsPage}
            />

            <Redirect to={RoutesPath.NotFoundPage} />
          </Switch>
        </Layout>

        <Route component={NotFoundPage} />
      </Switch>
      
      <GlobalStyle />
    </>
  );
}
  

Для компонента все работает нормально. Все пути, содержащиеся в этом компоненте, ведут к 404. Это вызвано компонентом, объявленным выше.

Почему это происходит и как я могу это исправить? Комментирование кода компонента работает нормально, но так получилось, что у меня есть два компонента из {дочерних элементов}, и я бы хотел, чтобы так и оставалось.