良好}

< "兼容性"" 兼容所有浏览器" 现代浏览器"

. 一键切换代码示例

只需改动根组件包裹层，内部 Routes、Link、useNavigate 等逻辑保持不变。说起来，

// Hash 模式
import { HashRouter as Router } from 'react-router-dom';// Browser 模式
import { BrowserRouter as Router } from 'react-router-dom';function App {
return (

{/* 路由配置统一放这里 */}

);}

. 避坑教程

• 选 HashRouter ：适合 B 端后台、对 SEO 没有要求且不想折腾 Nginx。缺点是 URL 带 “#”，分享链接时略显不专业。
• 选 BrowserRouter ：适合 C 端官网、博客、电商前台。**关键**这方面，部署后必须让运维同学配置 Nginx 重写规则。否则刷新非根方法会出现 404。

location / {
try_files $uri $uri/ /index.html;}

如果忘记配置，上面提到的 “页面白屏 / 刷新报错” 痛点又会 出现。

三、路由基础配置与懒加载调整

使用 `lazy` + `Suspense` 实现代码分割。只在使用者真正访问时才加载对应 JS，明显提高首屏渲染速度。

import { lazy,Suspense } from 'react';import { BrowserRouter as Router,Routes。Route,Navigate } from 'react-router-dom';// ==== 懒加载组件 ====
const Home = lazy => import);const About = lazy => import);const UserProfile = lazy => import);const Products = lazy => import);const ProductDetail= lazy => import);const NewProduct = lazy => import);const Login = lazy => import);const Pay = lazy => import);const NotFound = lazy => import);// 鉴权高阶组件也可以懒加载
const ProtectRoute = lazy => import);function App {
return (

Loading...}>



{/* 基础路由 */}
} />
} />
{/* 动态路由 */}
} />
{/* 嵌套路由 */}
}>
} />
} />
{/* 编程式跳转示例：旧方法重定向 */}
} />
{/* 鉴权路由 */}


}
/>
{/* 登录页 */}
} />
{/* 兜底页 */}
} />




);}
export default App;

四、主要功能详细说明

. 嵌套路由与 

在父组件 `Products` 中使用 `` 占位。不过，当 URL 为 `/products/:productId` 或 `/products/new` 时对应子组件会渲染在这里。老实说，

// src/pages/Products/index.jsx
import { Outlet } from 'react-router-dom';const Products = => {
return (
<>
{/* 子路由渲染出口 */}

);}，export default Products;

. 动态路由与 

方法 `/user/:id` 属于动态路由。子组件通过 `useParams` Hook 获取实际参数值。

// src/pages/User/UserProfile/index.jsx
import { useParams } from 'react-router-dom';function UserProfile {
const { id } = useParams;// 从 URL 中提取 id
console.log;return 

UserProfile: {id}
}
export default UserProfile;

. Navigate 与 useNavigate 的编程式跳转

• 声明式重定向： 在 Routes 中直接使用。
• 编程式跳转： navigate}>Go Home。

以下示例演示「404 页面」在三秒后自动返回首页：

// src/pages/NotFound/index.jsx
import { useEffect } from 'react';import { useNavigate } from 'react-router-dom';const NotFound = => {
const navigate = useNavigate;useEffect => {
const timer = setTimeout => navigate,);return => clearTimeout;},)，return <>Not Found，3 秒后返回首页...;
}，export default NotFound;

. 导航栏组件：Link 的正确使用

避免使用原生 `

// src/components/Navigation.jsx
import { Link } from 'react-router-dom';function Navigation {
return (