ReactRouterDOM：核心概念与API解析

React Router DOM：核心概念与API解析

React Router DOM 是 React 生态中最受欢迎的路由库，它为单页面应用 (SPA) 提供了声明式的路由管理。理解其核心概念和 API 对于构建复杂且可维护的 React 应用至关重要。本文将深入探讨 React Router DOM (v6 及以上版本) 的关键组成部分，并提供详细的 API 解析和示例。

一、 核心概念

1. 路由 (Routes)

   路由是 React Router DOM 的核心。它定义了 URL 路径与 React 组件之间的映射关系。当 URL 发生变化时，React Router DOM 会根据路由配置，渲染对应的组件。

2. BrowserRouter 与 HashRouter

   • BrowserRouter: 使用 HTML5 History API ( pushState, replaceState, popstate 事件) 来管理 URL。这使得 URL 看起来更干净，更像传统的服务器端渲染的 URL (例如：/about, /products/123)。推荐在大多数情况下使用 BrowserRouter。 但是，BrowserRouter 需要服务器端的配置支持，以便将所有请求都重定向到应用的入口文件 (通常是 index.html)。
   • HashRouter: 使用 URL 的 hash 部分 (#) 来管理路由 (例如：/#/about, /#/products/123)。HashRouter 不需要服务器端的特殊配置，因为它只改变 URL 的 hash 部分，而浏览器不会将 hash 部分发送给服务器。HashRouter 通常用于不需要服务器端支持的静态网站或旧版浏览器。

3. Route

   Route 组件定义了单个路由规则。它有两个最重要的属性：

   • path: 指定与 URL 匹配的路径。可以使用通配符 (*) 和参数 (例如：/products/:id)。
   • element: 指定当路径匹配时要渲染的 React 组件。

4. Link 与 NavLink

   • Link: 用于创建导航链接。点击 Link 组件会更新 URL，而不会导致整个页面刷新。
   • NavLink: NavLink 是 Link 的一个特殊版本，它提供了一个 active 类名（或自定义的activeClassName 和 activeStyle），用于指示当前链接是否处于活动状态（即当前 URL 是否与链接的 to 属性匹配）。这对于设置导航菜单的样式非常有用。

5. Outlet

   Outlet 组件用于在父路由组件中渲染其嵌套的子路由组件。 它充当子路由的占位符。 没有 Outlet，嵌套路由将无法正确显示。

6. Navigate

   Navigate 组件用于以编程方式导航到新的 URL。它可以用于重定向用户或在特定条件下改变路由。 它类似于设置 window.location.href，但它以 React Router DOM 的方式工作，可以与 history API 集成。

7. useParams, useLocation, useNavigate

   • useParams: 一个 Hook，用于访问 URL 中的动态参数。例如，如果路由路径是 /products/:id，则可以使用 useParams 获取 id 的值。
   • useLocation: 一个 Hook，用于访问当前 location 对象。location 对象包含有关当前 URL 的信息，例如 pathname、search (查询参数)、hash 和 state。
   • useNavigate: 一个 Hook，返回一个函数，该函数可用于以编程方式导航。它比 Navigate 组件更灵活，因为它允许您传递选项，例如 replace: true（替换历史记录中的当前条目，而不是添加新条目）。

二、API 解析与示例

1. 基本路由配置

   ```javascript
   import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';

   function App() {
   return (
   

     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/about" element={<About />} />
     </Routes>
   </BrowserRouter>
   

   );
   }

   function Home() {
   return

   Home

   ;
   }

   function About() {
   return

   About

   ;
   }
   ```

   这个例子展示了最基本的路由配置。BrowserRouter 包裹整个应用。<nav> 包含两个 Link 组件，分别链接到 / 和 /about。Routes 组件包含了两个 Route 组件，分别定义了 / 和 /about 路径与 Home 和 About 组件的映射。

2. 嵌套路由与 Outlet

   ```javascript
   function Products() {
   return (

   Products

   • Shoes
   • Bags

   {/ 渲染子路由 /}

   );
   }

   function Shoes() {
   return

   Shoes

   ;
   }

   function Bags() {
   return

   Bags

   ;
   }

   function App() {
   return (
   
   {/ ... 其他导航 /}
   
   } />
   }>
   } />
   } />
   
   
   
   );
   }
   ```

   在这个例子中，/products 路径下有两个嵌套的子路由：/products/shoes 和 /products/bags。Products 组件使用 Outlet 组件来渲染匹配的子路由组件。 注意父路由路径使用了 /*，这表示它可以匹配任何以 /products 开头的路径。

3. 动态路由参数与 useParams

   ```javascript
   function ProductDetail() {
   const { id } = useParams(); // 获取 URL 参数

   return (

   Product Detail

   Product ID: {id}

   );
   }

   function App() {
   return (
   
   {/ ... /}
   
   } />
   
   
   );
   }
   ```

   这个例子演示了如何使用动态路由参数。/products/:id 中的 :id 是一个占位符，表示产品 ID。ProductDetail 组件使用 useParams Hook 来获取 id 的值。

4. 使用 NavLink 设置活动链接样式

```javascript
import { NavLink } from 'react-router-dom';

function App() {
return (

{/ ... /}

);
}
```

这个例子展示了两种使用NavLink 设置活动样式的方法：

*   使用 `style` 属性和内联样式：`style` 属性接受一个函数，该函数接收一个包含 `isActive` 属性的对象。`isActive` 为 `true` 时表示当前链接是活动的。
*   使用 `className` 属性：`className` 属性也接受一个函数，该函数接收包含 `isActive` 属性的对象。  可以根据 `isActive` 来设置不同的类名。  然后，您可以在 CSS 文件中定义 `.active-link` 类的样式。

1. 使用 useNavigate 进行编程导航

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

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

   const handleClick = () => {
   navigate('/about'); // 导航到 /about
   };

   const handleReplace = () => {
      navigate('/other', { replace: true }); // 导航到 /other 并替换当前历史记录
   };
   

   return (

   Go to About
   Go to Other (Replace)

   );
   }
   ```

   这个例子演示了如何使用 useNavigate Hook 进行编程导航。handleClick 函数调用 navigate('/about') 来导航到 /about 页面。handleReplace函数调用navigate('/other', { replace: true })导航到/other页面，并且替换当前的历史记录。

2. 使用 useLocation 获取当前 URL 信息

   ```javascript
   import { useLocation } from 'react-router-dom';

   function LocationInfo() {
   const location = useLocation();

   return (

   Pathname: {location.pathname}

   Search: {location.search}

   Hash: {location.hash}

   );
   }
   ```

   此示例展示了如何使用 useLocation Hook 获取当前 URL 信息。

3. 重定向 (Navigate)

   ```javascript
   import { Navigate } from 'react-router-dom';

   function ProtectedPage() {
   const isLoggedIn = false; // 假设用户未登录

   if (!isLoggedIn) {
   return ; // 重定向到登录页面
   }

   return

   Protected Page

   ;
   }
   ```

   这个例子演示了如何使用 Navigate 组件进行重定向。如果用户未登录 (isLoggedIn 为 false)，则将用户重定向到 /login 页面。replace 属性设置为 true，表示替换当前的历史记录条目，而不是添加新的条目。

三、总结

React Router DOM 为 React 应用提供了强大而灵活的路由管理功能。通过理解其核心概念（Routes, BrowserRouter/HashRouter, Route, Link/NavLink, Outlet, Navigate, useParams, useLocation, useNavigate）和熟练掌握 API，您可以构建出结构清晰、易于维护的单页面应用。本文提供的示例涵盖了常见的使用场景，希望能够帮助您更好地理解和使用 React Router DOM。记住，实践是最好的老师，多写代码，多尝试不同的路由配置，才能真正掌握 React Router DOM 的精髓。