为了尽可能的掌握react-router，我们将项目分为前台和后台两个大的模块，其中后台又分为多个小模块。

1.安装路由

npm install --save react-router react-router-dom

此时的package.json文件如下：

{
  "name": "vite-react-typescript-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router": "^7.4.0",
    "react-router-dom": "^7.4.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
    "@types/node": "^22.13.13",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.17.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.14.0",
    "prettier": "^3.5.3",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.19.1",
    "vite": "^6.0.7",
    "vite-plugin-checker": "^0.9.1"
  }
}

2.创建layout组件

后台layout组件

在 src\layouts\backend\backend-layout-base.tsx 创建后台layout组件

import { Outlet } from 'react-router-dom';

function BackendLayoutBase() {
  return (
    <div>
      <h1>BackendLayoutBase 后台</h1>
      <main>
        <Outlet /> {/* 这里会渲染匹配的子路由 */}
      </main>
      <footer>
        <p>&copy; 2023 My App</p>
      </footer>
    </div>
  );
};

export default BackendLayoutBase;

3.创建页面组件

后台小模块Layout组件，这里命名为 ModuleLayout

在 src\pages\backend\layouts\module-layout.tsx 创建组件

import { Outlet } from 'react-router-dom';

function ModuleLayout() {
  return (
    <div>
      <h2>ModuleLayout Title</h2>
      <main>
        <Outlet /> {/* 这里会渲染匹配的子路由 */}
      </main>
    </div>
  );
};

export default ModuleLayout;

后台首页

在 src\pages\backend\views\home\index.tsx 创建 Home 组件

function Home() {
  return (
    <>
      <h1>Backend Home 后台首页</h1>
    </>
  );
}

export default Home;

前台页面

在 src\pages\foreend\views\home\index.tsx 同样创建一个前台用的 Home 组件

function Home() {
  return (
    <>
      <h1>Foreend Home 前台首页</h1>
    </>
  );
}

export default Home;

4.创建路由文件

在src文件夹下,创建如下目录结构

|- routes                        // 路由目录
    |- backend
        |- backend-router.tsx    // 后台路由
    |- foreend
        |- foreend-router.tsx    // 前台路由
    |- index.tsx                 // 路由导出

其中后台路由相关放到 backend-router.tsx 文件内，后台路由使用了多个嵌套路由，内容如下：

import { RouteObject } from 'react-router-dom';

import Home from '@/pages/backend/views/home';
import BackendLayoutBase from '@/layouts/backend/backend-layout-base';
import ModuleLayout from '@/pages/backend/layouts/module-layout';

const backendRouter: RouteObject[] = [
  {
    path: 'backend',
    element: (
      // 懒加载过程中先使用Spin组件占位
      <BackendLayoutBase />
    ),
    children: [
      {
        index: true,
        // 后台首页
        element: <Home />,
      },
      {
        // 某个模块
        path: 'module',
        element: <ModuleLayout />,
        children: [
          {
            index: true,
            // module 模块下的首页
            element: <h2>Module Home</h2>,
          },
        ],
      },
    ],
  },
];

export default backendRouter;

前台路由相关放到 foreend-router.tsx 文件内，内容如下：

import { RouteObject } from 'react-router-dom';

const foreendRouter: RouteObject[] = [
  {
    path: '/',
    element: (
      <>
        <h2>前台首页</h2>
        <header>
          <nav>
            <ul>
              <li>
                <a href="/backend">后台首页</a>
              </li>
              <li>
                <a href="/backend/module">后台某个模块的首页</a>
              </li>
            </ul>
          </nav>
        </header>
      </>
    ),
  },
];

export default foreendRouter;

src/routes目录下的 index.tsx 导入了后台路由和前台路由，还可以添加其它路由，比如404等，内容如下：

import { createBrowserRouter } from 'react-router-dom';

import foreendRouter from './foreend/foreend-router';
import backendRouter from './backend/backend-router';

const router: ReturnType<typeof createBrowserRouter> = createBrowserRouter([
  // 前台路由
  ...foreendRouter,
  // 后台路由
  ...backendRouter,
  // 其它路由
  {
    path: 'other',
    element: <h3>其它路由等...</h3>,
  },
]);

export default router;

5.在app.tsx中使用路由配置

使用 RouterProvider 组件，讲路由参数配置传入进去

import { RouterProvider } from 'react-router-dom';
import router from './routes';

function App() {
  return (
    <>
      <h1>Vite + React</h1>
      <RouterProvider router={router} />
    </>
  );
}

export default App;

运行项目，打开 http://localhost:3000/ 可以看到页面如下，这里是前台首页

点击 后台首页，进入 http://localhost:3000/backend

返回上一页，点击 后台某个模块的首页， 进入 http://localhost:3000/backend/module

浏览器直接输入 http://localhost:3000/other 可以进入 其它路由页面

总结一下，我们通过将项目划分为前后台两大模块，并进一步细分后台子模块，采用RouterProvider作为路由容器，通过多级Layout嵌套（包括基础布局BackendLayoutBase和模块布局ModuleLayout）和Outlet动态渲染机制，实现了灵活的路由组织方式。