reactjs - React-Router：为什么重定向到 404 页面？

Question

这些都是我的路径，我希望它们能够工作：

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。这是由上面声明的组件引起的。

为什么会发生这种情况，我该如何解决？注释掉组件代码可以正常工作，但碰巧我有两个来自 {children} 的组件，我希望它会保持这种状态。