React Router v6：巧妙运用 URL 参数和查询字符串
在 Web 应用中，URL 参数和查询字符串是 URL 管理的关键。它们允许您将动态数据传递给不同的路由，并基于这些数据来管理路由。React Router v6 提供了无缝的支持，让您轻松处理 URL 参数和查询字符串，从而构建更具动态性和灵活性的应用。
1. 使用 URL 参数定义路由
URL 参数，也称作路由参数或动态参数，是 URL 中用于捕获动态值的部分，通常用于识别特定资源或实体。
URL 参数示例：例如 /profile/:username 路径中的 :username 就是一个 URL 参数。
第一步：定义路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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;
说明：
路径 /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 的访问，包括路径名、搜索（查询字符串）和哈希。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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;
说明：
useLocation 提供当前位置对象，包含路径名、搜索（查询字符串）和哈希。 URLSearchParams 用于解析查询字符串并提取参数值。 代码中，query 参数从 URL 中提取，并显示在 Search 组件中。查询字符串要点：
useLocation: 访问当前位置，包括查询字符串。 URLSearchParams: 便捷的 API 用于解析和提取查询参数。3. 结合 URL 参数和查询字符串
您可以在同一个路由中同时使用 URL 参数和查询字符串。例如，您可以根据动态用户名显示用户资料，并使用查询参数过滤数据。
组合使用示例：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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;
说明：
此例中，URL 参数 username 和查询字符串 age 同时在 /profile/:username?age= 中使用。 使用 useParams 访问 username，使用 useLocation 和 URLSearchParams 访问 age 过滤器。要点：
参数组合: 可以组合 URL 参数和查询字符串来创建更复杂的路由场景。 关注点分离: URL 参数通常用于资源标识（如用户个人资料），而查询字符串用于额外的过滤或配置（如搜索查询、过滤器）。结论
React Router v6 简化了路由逻辑中 URL 参数和查询字符串的处理。使用 useParams 钩子访问动态路由参数，使用 useLocation 和 URLSearchParams 管理查询字符串。熟练掌握这些工具，您可以创建更具动态性和灵活性的 React 应用。
以上就是掌握 React Router v6 中的 URL 参数和查询字符串的详细内容，更多请关注php中文网其它相关文章！