reactjs - React 路由的模块化

Question

我是 ReactJS 的新手，希望在我的代码中实现某种程度的模块化，以便能够从单个文件/JSON 数组轻松添加/实现新的（嵌套）路由。

我已经尝试实例化一个 JSON Array 对象，其中包含<Route>组件预期的强制参数，然后将这个导出的变量导入App.js以迭代它，以便动态生成路由 - 只需要很少的代码行 - 但我遇到了很多问题，即，使用嵌套路由和默认的包罗万象的行为。

import React, { lazy } from 'react'
import { Redirect } from 'react-router-dom'

const routes = [
    {
        path: '/about',
        component: lazy(() => import(`./about`))
    },
    --- SNIP ---
    {
        path: '/resources',
        component: lazy(() => import(`./resources`)),
        routes: [
            {
                path: '/resources/all-resources',
                component: lazy(() => import(`./resources/all-resources`))
            },
            {
                path: '/resources/blog',
                exact: true,
                component: lazy(() => import(`./resources/blog`))
            },
            {
                component: () => <Redirect to="/404" />
            }
        ],
    },
    --- SNIP ---
    {
        component: lazy(() => import(`./not-found`))
    }
]

export default routes;

import React, { Suspense } from 'react';
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
import { createGlobalStyle, ThemeProvider } from 'styled-components';

import routes from './routes';

--- SNIP ---

function App() {
  return (
    <ThemeProvider theme={{ mode: 'dark' }}>
      <>
        <GlobalStyle />
        <BrowserRouter>
          <Switch>
            <Suspense fallback={<div>Loading...</div>}>
              {
                routes.map((route) =>
                  <Route path={route.path} component={route.component} exact={route.exact} />
                )
              }
            </Suspense>
          </Switch>
        </BrowserRouter>
      </>
    </ThemeProvider>
  );
}

export default App;

请参阅以下屏幕截图，显示 /404 组件尽管位于有效且预定义的端点中，但仍在显示：

查看嵌套路由无法正常工作 - 应该显示All Resources而不是Resources：

我希望从const routes导出的对象中读取所有路由并正确路由 - 包括嵌套和 /404 包罗万象的页面。