react router（长文解析）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

从基础到高级的渐进式学习

前言

在现代 Web 开发中，单页应用（SPA）因其流畅的用户体验而备受青睐。然而，如何在 SPA 中实现页面间的跳转与数据共享，始终是开发者需要解决的核心问题。React Router 正是为了解决这一痛点而诞生的路由库，它通过优雅的 API 设计，让 React 开发者能够轻松构建复杂的导航系统。无论是简单的页面跳转，还是动态路由、嵌套结构，React Router 都提供了灵活且高效的解决方案。

本文将从零开始，通过循序渐进的方式讲解 React Router 的核心概念与实践技巧。无论你是刚接触前端框架的初学者，还是希望提升路由能力的中级开发者，都能从中获得实用的知识与灵感。

一、React Router 的核心概念

1.1 路由的基本原理

想象你正在一座迷宫中探索，React Router 就像这座迷宫的地图：它通过 URL 的变化，引导用户在不同的页面（组件）之间自由切换。

• 路径（Path）：URL 的地址部分，例如 /about 或 /user/123。
• 组件（Component）：与路径对应的页面内容，例如 AboutPage 或 UserProfile。
• 导航（Navigation）：通过点击链接或编程方式触发页面跳转。

1.2 React Router 的版本选择

目前主流的 React Router 版本为 v6，它引入了多项改进，例如简化 API、支持 TypeScript、优化性能等。本文将以 v6 为基础进行讲解。

二、环境搭建与基础配置

2.1 安装 React Router

在项目根目录中执行以下命令安装：

npm install react-router-dom  

该包包含了 React Router 的核心功能，适用于浏览器环境。

2.2 基本路由配置

在入口文件（如 App.js）中，通过 <BrowserRouter> 包裹应用，并使用 <Routes> 和 <Route> 定义路径与组件的映射关系：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';  
import HomePage from './pages/HomePage';  
import AboutPage from './pages/AboutPage';  

function App() {  
  return (  
    <Router>  
      <Routes>  
        <Route path="/" element={<HomePage />} />  
        <Route path="/about" element={<AboutPage />} />  
      </Routes>  
    </Router>  
  );  
}  

export default App;  

关键点解析：

• <BrowserRouter> 提供浏览器历史 API 支持。
• <Routes> 是路由的容器组件，内部通过多个 <Route> 定义具体路径。
• element 属性直接接收 React 元素，替代了 v5 中的 component 属性。

三、动态路由与参数传递

3.1 动态路径的定义

当需要根据用户输入或 ID 加载不同内容时，可以使用 参数化路径。例如，用户资料页面的 URL 可能为 /user/123，其中 123 是动态参数。

<Route path="/user/:id" element={<UserProfile />} />  

3.2 参数的获取与使用

在目标组件中，通过 useParams 钩子获取参数值：

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

function UserProfile() {  
  const { id } = useParams(); // 获取路径中的 :id 参数  
  return <div>User ID: {id}</div>;  
}  

3.3 路径嵌套与父子关系

某些场景下，多个页面可能共享相同的路径前缀。例如，用户页面下可能包含资料和订单两个子页面。此时可以使用 嵌套路由：

<Route path="/user" element={<UserLayout />}>  
  <Route index element={<UserProfile />} />  
  <Route path="orders" element={<UserOrders />} />  
</Route>  

• index 属性表示默认子路由（访问 /user 时显示）。
• 父级组件 <UserLayout> 可以包裹子路由，提供导航栏或侧边栏等公共元素。

四、导航功能与状态管理

4.1 编程式导航

除了通过 <Link> 组件跳转，还可以使用 useNavigate 钩子实现编程式导航：

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

function HomePage() {  
  const navigate = useNavigate();  

  const handleRedirect = () => {  
    navigate('/about'); // 直接跳转到指定路径  
    // navigate(-1); // 返回上一页（类似浏览器后退）  
  };  

  return <button onClick={handleRedirect}>Go to About</button>;  
}  

4.2 路由状态传递

若需在跳转时传递非 URL 的状态数据，可以使用 state 属性：

// 跳转时携带状态  
navigate('/details', { state: { data: 'some-value' } });  

// 在目标页面获取状态  
import { useLocation } from 'react-router-dom';  

function DetailsPage() {  
  const location = useLocation();  
  const data = location.state?.data; // 注意空值检查  
  return <div>Data: {data}</div>;  
}  

五、高级技巧与性能优化

5.1 路由懒加载与代码拆分

通过 动态导入（Dynamic Import）实现路由组件的懒加载，减少初始加载时间：

const AboutPage = React.lazy(() => import('./pages/AboutPage'));  

function App() {  
  return (  
    <Routes>  
      <Route  
        path="/about"  
        element={  
          <React.Suspense fallback={<div>Loading...</div>}>  
            <AboutPage />  
          </React.Suspense>  
        }  
      />  
    </Routes>  
  );  
}  

5.2 路由守卫与权限控制

通过 useEffect 或自定义 Hook 实现路由权限验证：

function PrivateRoute({ element: Element, ...props }) {  
  const auth = useAuth(); // 假设存在权限验证逻辑  

  return auth.isAuthenticated ? (  
    <Route {...props} element={Element} />  
  ) : (  
    <Navigate to="/login" replace />  
  );  
}  

// 使用方式  
<Route path="/dashboard" element={<Dashboard />} component={PrivateRoute} />  

5.3 全局错误边界与未匹配路径

通过 <Route path="*" element={<NotFound />} /> 捕获未匹配的路径，并结合 React 的错误边界处理组件异常：

function App() {  
  return (  
    <Routes>  
      {/* 其他路由 */}  
      <Route path="*" element={<NotFound />} />  
    </Routes>  
  );  
}  

六、常见问题与解决方案

6.1 路由跳转后组件未重新渲染

原因：React Router 默认仅在路径变化时重新渲染匹配的组件。
解决方案：使用 key 属性强制重新渲染，或检查组件内部状态逻辑：

<Route  
  path="/user/:id"  
  element={<UserProfile key={id} />}  
/>  

6.2 路由嵌套层级过深

建议：使用 路由分割 将复杂结构拆分为多个独立路由文件，通过 import 引用。

// routes.js  
export const userRoutes = [  
  {  
    path: '/user',  
    element: <UserLayout />,  
    children: [  
      { index: true, element: <UserProfile /> },  
      { path: 'orders', element: <UserOrders /> },  
    ],  
  },  
];  

// App.js  
import { userRoutes } from './routes';  

function App() {  
  return (  
    <Routes>  
      {userRoutes.map((route) => (  
        <Route  
          key={route.path}  
          path={route.path}  
          element={route.element}  
        >  
          {route.children?.map((child) => (  
            <Route  
              key={child.path || child.index}  
              {...child}  
            />  
          ))}  
        </Route>  
      ))}  
    </Routes>  
  );  
}  

结论

通过本文的讲解，我们掌握了 React Router 的核心概念、基础配置、动态路由、权限控制以及性能优化等关键知识点。从简单的页面跳转到复杂的嵌套结构，React Router 提供了灵活且高效的解决方案，帮助开发者构建出功能丰富且易维护的单页应用。

建议读者通过以下步骤实践所学内容：

1. 创建一个包含主页、关于页面和用户详情页的简单项目。
2. 实现用户资料页面的动态参数传递与懒加载。
3. 添加路由守卫功能，模拟登录验证流程。

掌握 React Router 的同时，也需关注其官方文档的更新，以确保技术方案的前沿性与兼容性。希望本文能成为你构建复杂前端应用的可靠指南！