将查询字符串附加到 URL React - JavaScript

在 React 应用程序中，我们经常需要使用查询字符串将数据传递到 URL 中。这是实现以下需求的常见方法：

• 允许用户通过 URL 来浏览特定的数据
• 保存传递给 React 应用程序的一些数据，以便它们在浏览器中进行导航时仍然可用

在本篇文章中，我们将学习如何将查询字符串附加到 URL 中的 React 组件中。

URLSearchParams API

首先，我们需要了解 URLSearchParams API。这个 API 是一个用于处理查询字符串的接口，我们可以使用它来添加、删除和修改查询字符串的参数。

我们可以使用 URLSearchParams 的 toString() 方法将实例转换为字符串，该字符串可以附加到 URL 中：

const params = new URLSearchParams();
params.append('name', 'John');
params.append('age', 25);

const url = `https://example.com/?${params.toString()}`;
console.log(url);
// Output: https://example.com/?name=John&age=25

在 React 中使用 URLSearchParams

下面是一个例子，演示了如何在 React 中使用 URLSearchParams 向 URL 添加查询字符串：

import React from 'react';

function App() {
  const params = new URLSearchParams();
  params.append('name', 'John');
  params.append('age', 25);

  const url = `https://example.com/?${params.toString()}`;

  return (
    <div>
      <a href={url}>Go to Example</a>
    </div>
  );
}

export default App;

这将在页面上生成一个链接，当用户单击它时，它将带有查询字符串的 URL 打开。这个例子是一个函数式组件，但是您也可以在类组件中实现相同的方法。

使用 useHistory 钩子

如果你使用 React Router 5+，那么你可以使用 useHistory 钩子来将查询字符串附加到 URL 中。下面是一个示例：

import React from 'react';
import { useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();
  const handleClick = () => {
    const params = new URLSearchParams();
    params.append('name', 'John');
    params.append('age', 25);

    history.push({
      pathname: '/example',
      search: `?${params.toString()}`,
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Go to Example</button>
    </div>
  );
}

export default Home;

在这个例子中，当用户单击“Go to Example”按钮时，会使用 history.push() 方法将查询字符串附加到 URL 中。

结论

以上就是将查询字符串附加到 URL 的几种方法。我们可以使用 URLSearchParams API 直接操作查询字符串，也可以使用 useHistory 钩子来处理 React Router 中的 URL。无论哪种方式，都可以使我们实现 URL 与数据之间的绑定。