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

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

URL 参数和查询字符串是 Web 应用程序中 URL 管理的重要方面。它们允许您将动态数据传递到不同的路由并根据该数据管理路由。 React Router v6 为处理 URL 参数 和 查询字符串 提供无缝支持，允许您构建更加动态和灵活的应用程序。

---

1. React Router v6 中的 URL 参数

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

URL 参数示例：

对于 /profile/:username 这样的路由，用户名部分是 URL 参数。

第 1 步：使用 URL 参数定义路由

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';

const Profile = () => {
  // Use the useParams hook to access URL parameters
  const { username } = useParams();

  return <h2>Profile of {username}</h2>;
};

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/profile/john">John's Profile</Link></li>
          <li><Link to="/profile/sarah">Sarah's Profile</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/profile/:username" element={<Profile />} />
      </Routes>
    </Router>
  );
};

export default App;

说明：

• 路由 /profile/:username 中的 :username 是一个 URL 参数。
• useParams 钩子在 Profile 组件内部使用来访问 URL 参数（用户名）的值。
• 当用户导航到 /profile/john 时，值“john”将作为参数传递，并将显示在 Profile 组件中。

URL 参数的关键要点：

• 动态路由匹配：URL 参数允许您匹配动态路由。例如， /profile/:username 可以匹配 /profile/john 或 /profile/sarah。
• 访问参数：使用useParams来访问路由中参数的值。

---

2. React Router v6 中的查询字符串

查询字符串是出现在 ? 之后的键值对。在网址中。它们通常用于向服务器传递附加信息或在不更改路由的情况下修改页面的行为。

查询字符串示例：

对于像 /search?query=React 这样的 URL，查询字符串是 ?query=React。

第 1 步：使用 useLocation 处理查询字符串

在 React Router v6 中，可以使用 useLocation 钩子访问查询字符串。 useLocation 提供对当前 URL 的访问，包括路径名、搜索（查询字符串）和哈希。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';

const Profile = () => {
  // Use the useParams hook to access URL parameters
  const { username } = useParams();

  return <h2>Profile of {username}</h2>;
};

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/profile/john">John's Profile</Link></li>
          <li><Link to="/profile/sarah">Sarah's Profile</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/profile/:username" element={<Profile />} />
      </Routes>
    </Router>
  );
};

export default App;

说明：

• useLocation：该钩子提供当前位置对象，其中包括路径名、搜索（查询字符串）和哈希。
• URLSearchParams：用于解析查询字符串并提取查询参数的值。
• 示例中，查询参数query是从URL中提取出来的，其值显示在搜索组件中。

查询字符串的关键要点：

• useLocation：访问当前位置，包括查询字符串。
• URLSearchParams：用于解析和提取查询参数的便捷 API。

---

3.结合 URL 参数和查询字符串

您还可以在同一路由中同时使用 URL 参数和查询字符串。例如，您可能希望根据动态用户名显示用户个人资料并使用查询参数过滤数据。

同时包含 URL 参数和查询字符串的示例：

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';

const Search = () => {
  // Use the useLocation hook to access the query string
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const query = queryParams.get('query'); // Extract query parameter from the URL

  return (
    <div>
      <h2>Search Results</h2>
      {query ? <p>Searching for: {query}</p> : <p>No search query provided</p>}
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/search?query=React">Search for React</Link></li>
          <li><Link to="/search?query=JavaScript">Search for JavaScript</Link></li>
        </ul>
      </nav>

      <Routes>
        <Route path="/search" element={<Search />} />
      </Routes>
    </Router>
  );
};

export default App;

说明：

• 在这个例子中，URL参数username和查询字符串age在/profile/:username?age=中一起使用。网址。
• 使用 useParams 访问用户名，使用 useLocation 和 URLSearchParams 访问年龄过滤器。

要点：

• 组合参数：您可以组合 URL 参数和查询字符串来创建更复杂的路由场景。
• 单独的关注点：URL 参数通常用于资源标识（例如，用户配置文件），而查询字符串用于额外的过滤或配置（例如，搜索查询、过滤器）。

---

结论

React Router v6 可以轻松处理路由逻辑中的 URL 参数 和 查询字符串。使用 useParams 钩子，您可以轻松访问动态路由参数，而 useLocation 和 URLSearchParams 帮助管理查询字符串。通过有效地理解和使用这些工具，您可以创建具有增强路由功能的动态且灵活的 React 应用程序。

---

以上是掌握 React Router v6 中的 URL 参数和查询字符串的详细内容。更多信息请关注PHP中文网其他相关文章！