掌握 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` 这样的路线，`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 Profile of {username};
};

const App = () => {
  return (
    
      
        
          John's Profile
          Sarah's Profile
        
      

      
        } />
      
    
  );
};

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 中的查询字符串

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

查询字符串示例：

对于像 `/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, 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 (
    
      Search Results
      {query ? Searching for: {query}
 : No search query provided}
    
  );
};

const App = () => {
  return (
    
      
        
          Search for React
          Search for JavaScript
        
      

      
        } />
      
    
  );
};

export default App;

解释：

useLocation：此钩子提供当前位置对象，其中包括路径名、搜索（查询字符串）和哈希。

URLSearchParams：用于解析查询字符串并提取查询参数的值。

在示例中，从 URL 中提取查询参数 query，并将其值显示在 Search 组件中。

查询字符串的要点：

useLocation：访问当前位置，包括查询字符串。

URLSearchParams：一个用于解析和提取查询参数的便捷 API。

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

您还可以在同一路由中同时使用 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'); // Extract age filter from query string

  return (
    
      Profile of {username}
      {ageFilter && Age Filter: {ageFilter}}
    
  );
};

const App = () => {
  return (
    
      
        
          John's Profile
          Sarah's Profile
        
      

      
        } />
      
    
  );
};

export default App;

解释：

在此示例中，URL 参数 username 和查询字符串 age 在 /profile/:username?age= 中一起使用网址。

使用 useParams 访问用户名，使用 useLocation 和 URLSearchParams 访问年龄过滤器。

关键要点：

组合参数：您可以组合 URL 参数和查询字符串来创建更复杂的路由场景。

单独关注：URL 参数通常用于资源识别（例如用户配置文件），而查询字符串用于额外的过滤或配置（例如搜索查询、过滤器）。

结论

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

CLIS.CC