Hello! 欢迎来到小浪资源网!



掌握 React Router v6 中的 URL 参数和查询字符串


掌握 React Router v6 中的 URL 参数和查询字符串

React router v6:巧妙运用 URL 参数和查询字符串

在 Web 应用中,URL 参数和查询字符串是 URL 管理的关键。它们允许您将动态数据传递给不同的路由,并基于这些数据来管理路由。React Router v6 提供了无缝的支持,让您轻松处理 URL 参数和查询字符串,从而构建更具动态性和灵活性的应用。


1. 使用 URL 参数定义路由

URL 参数,也称作路由参数或动态参数,是 URL 中用于捕获动态值的部分,通常用于识别特定资源或实体。

URL 参数示例:

例如 /profile/:username 路径中的 :username 就是一个 URL 参数。

第一步:定义路由

复制代码
  1. 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. 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. 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 应用。

相关阅读