首页　>　文章列表　>　掌握 React Router v6 中的 URL 参数和查询字符串

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

420 2025-01-08

React Router v6：巧妙运用 URL 参数和查询字符串

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

1. 使用 URL 参数定义路由

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

URL 参数示例：

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

第一步：定义路由

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 的访问，包括路径名、搜索（查询字符串）和哈希。

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 参数和查询字符串。例如，您可以根据动态用户名显示用户资料，并使用查询参数过滤数据。

组合使用示例：

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;