vite配置react-router

### 如何在 Vite 项目中配置 React Router

#### 安装依赖包
为了使 `react-router-dom` 正常工作于基于 Vite 的 React 应用程序中，需先安装必要的 npm 包。通过执行命令来添加 `react-router-dom` 到开发环境中：

pnpm add react-router-dom@6 --save-dev

此操作会下载并保存版本为 6 的 `react-router-dom` 及其作为开发者工具所需的文件到本地项目中[^3]。

#### 修改入口文件 main.tsx
对于采用 TypeScript 构建的应用，在项目的根目录下找到 `main.tsx` 文件，并按照如下方式调整代码结构以支持路由功能：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HashRouter as Router } from 'react-router-dom';

const rootElement = document.getElementById('root');
if (rootElement) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(
        <React.StrictMode>
            <Router>
                <App />
            </Router>
        </React.StrictMode>
    );
}

这段代码实现了创建应用实例并将之挂载至 DOM 节点的操作，同时包裹了一层 `HashRouter` 组件以便管理页面间的导航逻辑[^2]。

#### 编辑核心组件 App.jsx
接下来编辑应用程序的核心组件 `App.jsx` 来定义具体的路由映射关系。这里展示了一个简化版的例子，其中包含了基本的路径匹配规则以及对应的视图呈现机制：

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { ConfigProvider } from 'zarm';
import routes from '../src/router'; // 假设有一个集中管理路由表的地方

function App() {
    return (
        <BrowserRouter>
            <ConfigProvider>
                <Routes>
                    {routes.map((route) => (
                        <Route
                            key={route.path}
                            path={route.path}
                            element={<route.component />}
                        />
                    ))}
                </Routes>
            </ConfigProvider>
        </BrowserRouter>
    );
}

export default App;

上述代码片段展示了如何利用 `map()` 方法遍历预定义好的路由数组，并动态生成相应的 `<Route>` 元素列表；此外还集成了来自第三方库 `zarm` 提供的设计风格组件 `ConfigProvider`[^1]。