【深度】React Router进阶教程，每个前端都应该掌握的技能

这是一份为你整理的 React Router v6 进阶实战指南。这份教程完全基于纯文本和代码，重点讲解在实际软件开发中，如何构建企业级的单页应用(SPA)路由系统。

1. 路由懒加载与性能优化

在大型项目中，首屏加载速度至关重要。利用 React.lazy() 配合 Suspense，可以实现路由级的代码分割(Code Splitting)。只有当用户真正访问该路由时，才会下载对应的 JS 文件，从而大幅减小首屏包体积。

jsx

预览

1import { lazy, Suspense } from 'react';

2import { Routes, Route } from 'react-router-dom';

3

4// 按需导入页面组件

5const Home = lazy(() => import('./pages/Home'));

6const Dashboard = lazy(() => import('./pages/Dashboard'));

7

8function AppRoutes() {

9 return (

10页面加载中...

}>

11

12} />

13} />

14

15

16 );

17}

2. 嵌套路由与布局组件

嵌套路由非常适合管理后台等具有复杂层级的 UI 结构。父级路由负责渲染公共布局(如侧边栏、顶部导航)，子级路由通过组件渲染到父组件的指定位置。

jsx

预览

1import { Outlet, Link } from 'react-router-dom';

2

3// 布局组件

4const AdminLayout = () => (

5

6

7 用户管理

8 系统设置

9

10

11 {/* 子路由将渲染在这里 */}

12

13

14

15);

16

17// 路由配置

18

19}>

20} />

21} />

22

23

3. 路由守卫(权限控制)

在实际业务中，某些页面需要登录或特定权限才能访问。可以通过封装一个高阶组件(或包装组件)来实现路由守卫。如果未授权，则使用将用户重定向到登录页。

jsx

预览

1import { Navigate, Outlet } from 'react-router-dom';

2

3const ProtectedRoute = ({ isAuthenticated }) => {

4 if (!isAuthenticated) {

5 // 重定向到登录页，replace 防止用户点击后退回到受保护页面

6 return;

7 }

8 // 验证通过，渲染子路由

9 return;

10};

11

12// 使用守卫包裹需要权限的路由

13

14}>

15} />

16

17} />

18

4. 编程式导航与 404 兜底

除了使用 进行声明式跳转，在表单提交、登录成功等事件回调中，需要使用 useNavigate 钩子进行编程式导航。同时，务必在路由表最后配置 path="*" 来处理 404 页面。

jsx

预览

1import { useNavigate, Routes, Route } from 'react-router-dom';

2

3const LoginPage = () => {

4 const navigate = useNavigate();

5

6 const handleLogin = () => {

7 // 模拟登录逻辑...

8 navigate('/dashboard', { replace: true });

9 };

10

11 return登录;

12};

13

14// 404 兜底路由(必须放在所有路由的最后)

15

16} />

17} />

18

 部署避坑指南

在使用 BrowserRouter 时，如果用户在深层路由(如 /dashboard/users)直接刷新浏览器，服务器可能会返回 404。这是因为服务器找不到对应的物理文件。

解决方案：需要在服务器端(如 Nginx)配置 fallback 规则，将所有找不到的前端路径都回退到 index.html，让 React Router 接管后续的路由渲染。