{/* 匹配所有未匹配到的路径，通常用于 404 页面 */}
    <Route path="*" element={<NotFoundPage />} />
  </Routes>
  {/* 其他应用布局，如页脚 */}
</div>

);
}

export default App;
“`

在这个例子中，Routes 包裹了多个 Route 组件。当用户访问 / 路径时，Routes 会匹配到第一个 Route 并渲染 <HomePage />。当访问 /about 时，会匹配到第二个 Route 并渲染 <AboutPage />。如果访问任何其他未在前面定义的路径（例如 /contact），Routes 会匹配到 path="*" 的那个 Route，并渲染 <NotFoundPage />。

3. Route：定义路由规则与渲染内容

Route 组件是 React Router DOM 中定义单个路由规则的核心。它接收两个主要的属性：

• path: 一个字符串，表示该路由匹配的 URL 路径。它可以是静态路径（如 /about），也可以包含动态参数（如 /users/:userId）。
• element: 一个 React 元素（通常是 JSX），当该路由匹配时，会被渲染出来。

使用示例：

上面 Routes 的例子已经展示了 Route 的基本用法。下面我们看一个包含动态参数的例子：

“`jsx
// App.js (部分)
import React from ‘react’;
import { Routes, Route } from ‘react-router-dom’;
import ProfilePage from ‘./pages/ProfilePage’;

function App() {
return (

{/ … 其他路由 /}
} />
{/ … 其他路由 /}

);
}

// pages/ProfilePage.js
import React from ‘react’;
import { useParams } from ‘react-router-dom’;

function ProfilePage() {
// 使用 useParams Hook 获取 URL 中的动态参数
const { userId } = useParams();

return (

);
}

export default ProfilePage;
“`

当用户访问 /users/123 时，/users/:userId 这个 Route 会被匹配到。userId 这个参数的值 123 就会被捕获，并在 ProfilePage 组件中通过 useParams() Hook 获取到。

Index Routes (v6+)

在 v6 中，Route 还支持 index 属性。当一个父级路由被匹配时，index 路由会在父级路径精确匹配时渲染，作为父级路由的默认子路由。这在嵌套路由中非常有用。

“`jsx
// Layout.js (父组件)
import React from ‘react’;
import { Outlet, Link } from ‘react-router-dom’;

function DashboardLayout() {
return (

);
}

// App.js (部分)
import React from ‘react’;
import { Routes, Route } from ‘react-router-dom’;
import DashboardLayout from ‘./layouts/DashboardLayout’;
import DashboardHome from ‘./pages/DashboardHome’; // 仪表盘首页
import DashboardSettings from ‘./pages/DashboardSettings’; // 仪表盘设置页

function App() {
return (

{/ … 其他路由 /}
}>
{/ index Route 会在访问 /dashboard 时渲染 /}
} />
} /> {/ 注意这里是相对路径 “settings” /}

{/ … 其他路由 /}

);
}
“`

在这个例子中，当访问 /dashboard 时，DashboardLayout 会被渲染，并且因为它是精确匹配 /dashboard，所以其内部的 index 路由也会被匹配，<DashboardHome /> 将通过 <Outlet> 渲染出来。当访问 /dashboard/settings 时，DashboardLayout 仍然会被渲染，但其子路由 path="settings" 会被匹配，<DashboardSettings /> 将通过 <Outlet> 渲染出来。

4. Link 或 NavLink：声明式导航

在 React 应用中，我们通常不使用传统的 <a href="..."> 标签进行内部导航。因为传统的 <a> 标签会导致页面刷新，从而破坏 SPA 的体验。React Router DOM 提供了 Link 组件来替代 <a> 标签，实现客户端导航。

Link 组件会阻止浏览器默认的链接行为，而是利用 History API 或 Hash API 来改变 URL，并通知 React Router DOM 渲染对应的组件，而无需页面刷新。

Link

最基本的导航组件。

“`jsx
import { Link } from ‘react-router-dom’;

function Navigation() {
return (

);
}
“`

Link 接收一个 to 属性，指定要导航到的路径。to 可以是一个字符串，也可以是一个对象，用于传递 state 数据。

NavLink

NavLink 是 Link 的一个特殊版本，它可以在链接与当前 URL 匹配时自动为其添加一个表示“活跃”状态的 CSS 类名或样式。这对于制作导航菜单等高亮显示当前页面的元素非常有用。

NavLink 提供了 activeClassName (v5) 或 className (v6 函数式), activeStyle (v5) 或 style (v6 函数式), 以及 isActive (v6 函数式) 等属性来定制活跃状态的样式。

“`jsx
import { NavLink } from ‘react-router-dom’;

function Navigation() {
return (

);
}
“`

在 v6 中，className 和 style 属性接收一个函数，该函数暴露一个 { isActive } 对象，你可以根据 isActive 的布尔值来决定返回的类名或样式。

5. useNavigate Hook：编程式导航

有时候，你可能需要在某个事件发生后（例如表单提交成功后）进行页面跳转，而不是通过点击链接。这时，你可以使用 useNavigate Hook 来获取一个函数，该函数允许你在代码中进行编程式导航。

useNavigate Hook 返回一个 navigate 函数。调用 navigate(path) 即可跳转到指定的路径。它还支持一些选项，例如 replace: true 可以替换当前历史记录而不是添加新记录。

使用示例：

“`jsx
import React, { useState } from ‘react’;
import { useNavigate } from ‘react-router-dom’;

function LoginForm() {
const [username, setUsername] = useState(”);
const navigate = useNavigate(); // 获取 navigate 函数

const handleSubmit = (event) => {
event.preventDefault();
// 假设登录成功
console.log(‘用户’, username, ‘登录成功！’);

// 编程式导航到仪表盘页面
navigate('/dashboard', { replace: true }); // replace: true 表示登录页不可回退
// 也可以传递 state
// navigate('/dashboard', { state: { loggedInUser: username } });

};

return (

);
}
“`

useNavigate Hook 是 v6 中取代 v5 useHistory Hook 的新方式。它的 API 更加简洁直观。

6. useParams Hook：获取 URL 参数

如前所述，当你的路由路径包含动态参数（如 /users/:userId）时，useParams Hook 允许你在匹配该路由的组件中访问这些参数的值。

useParams Hook 返回一个对象，其属性名对应于你在 Route 的 path 中定义的参数名（例如 userId），属性值则是当前 URL 中该参数的实际值。

使用示例：

上面 Route 示例中的 ProfilePage 组件已经展示了 useParams 的用法：

“`jsx
// pages/ProfilePage.js
import React from ‘react’;
import { useParams } from ‘react-router-dom’;

function ProfilePage() {
// 从 URL /users/:userId 中提取 userId 参数
const { userId } = useParams();

// 假设通过 userId 调用 API 获取用户数据…

return (

);
}
“`

7. useLocation Hook：获取当前位置信息

useLocation Hook 返回一个 location 对象，该对象表示应用程序当前所在的 URL 位置。这个对象包含有关当前 URL 的各种信息，包括：

• pathname: URL 的路径部分（例如 /users/123）。
• search: URL 的查询字符串部分（例如 ?name=react&version=6），包含开头的 ?。
• hash: URL 的哈希片段部分（例如 #section-1），包含开头的 #。
• state: 通过编程式导航（navigate 或 Link 的 state 属性）传递的状态对象。

useLocation 对于访问查询参数、处理 URL 哈希或获取导航时传递的状态非常有用。

使用示例：

“`jsx
import React from ‘react’;
import { useLocation } from ‘react-router-dom’;

function SearchResultsPage() {
const location = useLocation(); // 获取 location 对象
const queryParams = new URLSearchParams(location.search); // 使用 URLSearchParams 解析查询字符串

const searchTerm = queryParams.get(‘q’); // 获取 ‘q’ 参数的值
const page = queryParams.get(‘page’) || ‘1’; // 获取 ‘page’ 参数的值，默认为 ‘1’

// 假设根据 searchTerm 和 page 调用 API 获取搜索结果…

return (

);
}
“`

当用户访问 /search?q=react-router&page=2 时，location.search 的值将是 ?q=react-router&page=2。通过 URLSearchParams 工具类，我们可以方便地从中提取各个查询参数的值。

8. useMatch Hook：检查路径匹配

useMatch Hook 可以帮助你检查一个特定的路径模式是否与当前 URL 匹配。它返回一个 match 对象，如果匹配成功，则包含有关匹配的信息（如参数），否则返回 null。

这个 Hook 在某些场景下很有用，比如你需要根据某个非当前路由的路径是否匹配来渲染不同的 UI，或者在自定义导航组件中判断某个链接是否与当前路径“部分匹配”。

使用示例：

“`jsx
import React from ‘react’;
import { useMatch, Link } from ‘react-router-dom’;

function CustomLink({ to, children, …props }) {
// 检查当前 URL 是否与传递的 ‘to’ 路径匹配
const match = useMatch(to);

return (

{children}

);
}

// 在其他组件中使用
function Navigation() {
return (

);
}
“`

在这个例子中，CustomLink 组件使用 useMatch 来判断它所指向的路径是否与当前 URL 匹配，并据此改变链接的样式。如果当前路径是 /users/123，那么指向 /users/123 的链接会匹配，指向 /users 的链接也会匹配（因为 /users/123 包含了 /users）。如果需要更精确的匹配，可以在 useMatch 的第二个参数中传递选项，例如 { end: true } 要求路径完全匹配。

嵌套路由 (Outlet)

React Router DOM v6 对嵌套路由的处理变得更加简洁和强大，主要依赖于 Route 的嵌套和 Outlet 组件。

在一个父级 Route 中嵌套子级 Route，并不会直接在父级组件内部渲染子级组件。而是，父级组件需要使用 <Outlet /> 组件作为占位符，来告诉 React Router DOM 在哪里渲染当前匹配到的子路由组件。

工作原理：

1. 在 Routes 中，定义一个包含子 Route 的父级 Route。
2. 父级 Route 的 element 属性指向一个布局组件（通常包含导航和共享 UI）。
3. 在这个布局组件中，使用 <Outlet /> 组件作为占位符。
4. 当 URL 匹配父级路径 以及 其后的子路径时，父级布局组件会被渲染，而匹配到的子路由组件则会渲染在 <Outlet /> 的位置。

这使得布局组件可以独立于其内部具体页面组件进行开发和维护，非常适合构建带有侧边栏、标签页等通用布局的复杂应用。

上面关于 Route 组件 index 属性的示例已经包含了嵌套路由和 Outlet 的基本用法，这里不再重复提供完整的代码，读者可以回看该示例加深理解。

处理未匹配的路由 (404 Page)

一个健壮的应用需要能够处理用户访问不存在的 URL 的情况，通常是通过显示一个“404 Not Found”页面。在 React Router DOM 中，这可以通过在 Routes 的最后定义一个 path="*" 的 Route 来实现。

path="*" 是一个通配符，它会匹配任何未被前面的 Route 匹配到的路径。由于 Routes 总是渲染最佳匹配的那个 Route，将 path="*" 的 Route 放在所有其他具体路径的 Route 之后，可以确保它只在所有其他路径都无法匹配时才生效。

使用示例：

“`jsx
import React from ‘react’;
import { Routes, Route } from ‘react-router-dom’;
// … 其他页面组件
import NotFoundPage from ‘./pages/NotFoundPage’;

function App() {
return (

{/ 其他具体路径的路由 /}
} />
} />
} />
{/ 可以有带参数的路由 /}
} />
{/ 嵌套路由 /}
} /> {/ 注意这里的通配符用于嵌套 /}

  {/* 放在最后：匹配所有未被上面 Route 匹配的路径 */}
  <Route path="*" element={<NotFoundPage />} />
</Routes>

);
}
“`

在这个例子中，任何访问 /、/about、/dashboard、/users/:userId、/admin/* 及其子路径之外的 URL，都将最终匹配到 path="*" 的 Route，并渲染 NotFoundPage 组件。

总结

React Router DOM 是构建 React 单页应用客户端路由的强大而灵活的工具。通过理解并熟练运用其核心组件，你可以轻松地管理应用的导航和视图切换：

• BrowserRouter / HashRouter：建立路由上下文，选择 URL 同步模式。
• Routes：包裹路由规则，智能匹配并渲染最佳的 Route。
• Route：定义单个路由规则，包括路径和对应的渲染组件。
• Link / NavLink：实现声明式的、无刷新的内部导航。
• useNavigate：实现编程式导航，例如在事件处理函数中进行跳转。
• useParams：在组件中获取 URL 路径中的动态参数。
• useLocation：获取当前 URL 的详细信息，包括查询参数和 state。
• useMatch：检查一个路径模式是否匹配当前 URL。
• Outlet：在嵌套路由的父级组件中作为子路由的占位符。

掌握这些核心组件及其背后的原理，你就能构建出功能完善、用户体验流畅、结构清晰且易于维护的 React 应用路由系统。随着你对 React Router DOM 的深入使用，你还可以探索其提供的更多高级功能，如路由守卫、代码分割与懒加载等，进一步优化应用的性能和用户体验。

实践是最好的学习方式，建议你在自己的 React 项目中动手尝试使用这些组件，逐步构建和完善你的应用路由。祝你在 React Router DOM 的学习和使用中一切顺利！