React Router v6：巧妙运用 URL 参数和查询字符串
在 Web 应用中，URL 参数和查询字符串是 URL 管理的关键。它们允许您将动态数据传递给不同的路由，并基于这些数据来管理路由。React Router v6 提供了无缝的支持，让您轻松处理 URL 参数和查询字符串，从而构建更具动态性和灵活性的应用。
1. 使用 URL 参数定义路由
URL 参数，也称作路由参数或动态参数，是 URL 中用于捕获动态值的部分，通常用于识别特定资源或实体。
URL 参数示例：
例如 /profile/:username 路径中的 :username 就是一个 URL 参数。
第一步：定义路由
<code class="javascript">import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';
const Profile = () => {
const { username } = useParams();
return <h2>{username} 的个人资料</h2>;
};
const App = () => {
return (
<Router>
<nav>
<ul>
<li><Link to="/profile/john">John 的个人资料</Link></li>
<li><Link to="/profile/jane">Jane 的个人资料</Link></li>
</ul>
</nav>
<Routes>
<Route path="/profile/:username" element={<Profile />} />
</Routes>
</Router>
);
};
export default App;</code>
说明：
- 路径
/profile/:username中的:username是 URL 参数。 -
useParams钩子用于访问 URL 参数的值。 - 当用户访问
/profile/john时，“john” 将作为参数传递并显示在Profile组件中。
URL 参数要点：
-
动态路由匹配: URL 参数支持动态路由匹配，例如
/profile/:username可以匹配/profile/john或/profile/jane。 -
参数访问: 使用
useParams钩子访问路由参数的值。
2. 使用查询字符串
查询字符串位于 URL 的 ? 之后，是一系列键值对，通常用于向服务器传递附加信息，或在不改变路由的情况下修改页面行为。
查询字符串示例：
例如 /search?query=react 中的 ?query=react 就是查询字符串。
第一步：使用 useLocation 处理查询字符串
React Router v6 使用 useLocation 钩子访问查询字符串。useLocation 提供对当前 URL 的访问，包括路径名、搜索（查询字符串）和哈希。
<code class="javascript">import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
const Search = () => {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const query = queryParams.get('query');
return (
<div>
<h2>搜索结果</h2>
{query ? <p>搜索关键词：{query}</p> : <p>未提供搜索关键词</p>}
</div>
);
};
const App = () => {
return (
<Router>
<nav>
<ul>
<li><Link to="/search?query=react">搜索 react</Link></li>
<li><Link to="/search?query=javascript">搜索 javascript</Link></li>
</ul>
</nav>
<Routes>
<Route path="/search" element={<Search />} />
</Routes>
</Router>
);
};
export default App;</code>
说明：
-
useLocation提供当前位置对象，包含路径名、搜索（查询字符串）和哈希。 -
URLSearchParams用于解析查询字符串并提取参数值。 - 代码中，
query参数从 URL 中提取，并显示在Search组件中。
查询字符串要点：
-
useLocation: 访问当前位置，包括查询字符串。 -
URLSearchParams: 便捷的 API 用于解析和提取查询参数。
3. 结合 URL 参数和查询字符串
您可以在同一个路由中同时使用 URL 参数和查询字符串。例如，您可以根据动态用户名显示用户资料，并使用查询参数过滤数据。
组合使用示例：
<code class="javascript">import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation, useParams } from 'react-router-dom';
const Profile = () => {
const { username } = useParams();
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const ageFilter = queryParams.get('age');
return (
<div>
<h2>{username} 的个人资料</h2>
{ageFilter && <p>年龄筛选：{ageFilter}</p>}
</div>
);
};
const App = () => {
return (
<Router>
<nav>
<ul>
<li><Link to="/profile/john?age=25">John 的个人资料 (25岁)</Link></li>
<li><Link to="/profile/jane?age=30">Jane 的个人资料 (30岁)</Link></li>
</ul>
</nav>
<Routes>
<Route path="/profile/:username" element={<Profile />} />
</Routes>
</Router>
);
};
export default App;</code>
说明：
- 此例中，URL 参数
username和查询字符串age同时在/profile/:username?age=<value>中使用。 - 使用
useParams访问username，使用useLocation和URLSearchParams访问age过滤器。
要点：
- 参数组合: 可以组合 URL 参数和查询字符串来创建更复杂的路由场景。
- 关注点分离: URL 参数通常用于资源标识（如用户个人资料），而查询字符串用于额外的过滤或配置（如搜索查询、过滤器）。
结论
React Router v6 简化了路由逻辑中 URL 参数和查询字符串的处理。使用 useParams 钩子访问动态路由参数，使用 useLocation 和 URLSearchParams 管理查询字符串。熟练掌握这些工具，您可以创建更具动态性和灵活性的 React 应用。
