require.context 实现react-router6 约定式路由

要使用 `require.context` 实现 React Router 6 的约定式路由，需要做以下几个步骤：

1. 在项目中安装 React Router 6：`npm install react-router-dom@next`
2. 创建一个文件夹来存放所有的路由组件，比如 `pages` 文件夹。
3. 在 `pages` 文件夹下创建每个路由对应的组件文件，比如 `Home.js`、`About.js` 等。
4. 在 `pages` 文件夹下创建一个 `index.js` 文件，用于导出所有路由组件。
5. 在根目录下创建一个名为 `routes.js` 的文件，用于定义约定式路由规则。

下面是一个示例的 `routes.js` 文件：

import { lazy } from 'react';

// 使用 require.context 导入所有的路由组件
const pages = require.context('./pages', true, /\.js$/);

const routes = [
  {
    path: '/',
    element: lazy(() => import('./pages/Home')),
  },
  {
    path: '/about',
    element: lazy(() => import('./pages/About')),
  },
];

export default routes;

在上面的示例中，我们使用 `require.context` 导入了 `pages` 文件夹下的所有 `.js` 文件，并且定义了每个路由的路径和对应的组件。

最后，在根组件中使用 React Router 6 的 `Routes` 组件来渲染路由：

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import routes from './routes';

const App = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          {routes.map((route, index) => (
            <Route
              key={index}
              path={route.path}
              element={<route.element />}
            />
          ))}
        </Routes>
      </Suspense>
    </Router>
  );
};

export default App;

在上面的示例中，我们遍历 `routes` 数组，并使用 `Route` 组件来渲染每个路由。

这样就可以使用 `require.context` 实现 React Router 6 的约定式路由了。注意，这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。