react项目配置路由

### 如何在 React 项目中设置和配置路由

#### 使用 `react-router-dom` 进行基本路由配置

为了实现基础的路由功能，在 `src` 目录下创建一个名为 `routes.js` 的文件用于定义应用内的路径映射关系[^1]：

import React from 'react';
import { createBrowserRouter, Route, RouterProvider } from 'react-router-dom';

// 定义页面组件
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

// 创建浏览器路由器实例并注册路由规则
const router = createBrowserRouter([
    {
        path: '/',
        element: <Home />,
    },
    {
        path: '/about',
        element: <About />,
    }
]);

export default router;

接着修改项目的入口组件 `App.js` 来集成上述定义好的路由逻辑[^2]：

import React from 'react';
import { RouterProvider } from 'react-router-dom';
import router from './routes'; // 导入自定义的路由表

function App() {
    return (
        <div>
            <RouterProvider router={router} />
        </div>
    );
}

export default App;

这样就完成了最简单的路由配置工作。

#### 处理嵌套路由与子组件展示

对于更复杂的场景比如存在父子级关联的情况，则可以在父组件内部预留位置给子组件渲染，并利用 props.children 属性传递内容[^3]:

import React from 'react';

const ParentComponent = ({ children }) => (
    <section>
        <header><h1>Parent Component Header</h1></header>
        <main>{children}</main> {/* 子路由会在这里呈现 */}
    </section>
);

export default ParentComponent;

#### 动态加载及权限控制下的高级路由设定

当涉及到按需懒加载模块以及基于角色访问控制等功能需求时，可以考虑采用如下方式构建更加灵活高效的路由体系[^4]：

import React, { lazy, Suspense } from 'react';
import { createBrowserRouter } from 'react-router-dom';

// 延迟加载指定组件
const LazyHome = lazy(() => import('./pages/Home'));
const LazyAdminPanel = lazy(() => import('./pages/Admin'));

// 构建带权限校验机制的动态路由列表
const routesWithAuthCheck = [
    {
        path: "/",
        element: (
            <Suspense fallback={<p>Loading...</p>}>
                <LazyHome />
            </Suspense>
        ),
        authRequired: false,
    },
    {
        path: "/admin",
        element: (
            <Suspense fallback={<p>Loading...</p>}>
                <LazyAdminPanel />
            </Suspense>
        ),
        authRequired: true,
        rolesAllowed: ['admin']
    }
];

// 实际使用的路由对象应在此处进一步处理...