下面是一个react+Vite项目的main.jsx文件内容，我想增加路由功能， 当以域名直接访问或 /login 访问时，显示Login.jsx模块， 当以其他 /{模块名} 访问时，路由到其他模块

下面是一个react+Vite项目的main.jsx文件内容，我想增加路由功能，
当以域名直接访问或 /login 访问时，显示Login.jsx模块，
当以其他 /{模块名} 访问时，路由到其他模块

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import Login from './pages/Login.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Login />
  </StrictMode>,
)

eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

要在 React + Vite 项目中增加路由功能，你需要做以下几步：

---

✅ 1️⃣ 安装 React Router

在项目根目录下运行：

npm install react-router-dom

这会安装路由库。

---

✅ 2️⃣ 修改 main.jsx

将 main.jsx 修改为：

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import './index.css';
import Login from './pages/Login.jsx';
import NotFound from './pages/NotFound.jsx';  // 404页面
import OtherModule from './pages/OtherModule.jsx';  // 示例模块

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        {/* 根路径和 /login 显示 Login 模块 */}
        <Route path="/" element={<Navigate to="/login" />} />
        <Route path="/login" element={<Login />} />

        {/* 动态路由，匹配其他模块 */}
        <Route path="/:moduleName" element={<OtherModule />} />

        {/* 404页面 */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>,
);

✅ 解释：

• /：访问根路径时，重定向到 /login。
• /login：显示 Login.jsx 模块。
• /:moduleName：动态路由，匹配 /其他模块名。
• *：通配符匹配 404 页面。

---

✅ 3️⃣ 创建其他模块示例

pages/OtherModule.jsx

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

const OtherModule = () => {
  const { moduleName } = useParams();

  return (
    <div>
      <h1>模块：{moduleName}</h1>
    </div>
  );
};

export default OtherModule;

• useParams() 可以获取 URL 中的动态参数，例如 /report → moduleName = "report"

---

pages/NotFound.jsx

const NotFound = () => {
  return (
    <div>
      <h1>404 - 页面不存在</h1>
    </div>
  );
};

export default NotFound;

• 简单的 404 页面。

---

✅ 这样，你的项目就具备了：

• / 和 /login 显示 Login 模块；
• /report、/dashboard 等访问其他模块；
• 未匹配的路径自动进入 404 页面。🚀