如何将查询参数添加到 url reactjs

在ReactJS应用程序中，添加查询参数到URL可能会有一些挑战。但是，使用URLSearchParams，我们可以在React中轻松添加查询参数。

使用URLSearchParams添加查询参数

添加查询参数到URL是很简单的，以下是代码演示：

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

function App() {
  const history = useHistory();

  const handleClick = () => {
    const params = new URLSearchParams();
    params.append('name', 'John');
    params.append('age', '30');
    history.push(`/profile?${params.toString()}`);
  };

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

在上面的示例中，我们使用URLSearchParams构造函数创建一个参数对象，并将参数添加到该对象中。然后，我们使用history.push()方法将查询参数添加到URL中。

读取Query参数

使用useLocation，我们可以读取查询参数。以下是代码示例：

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

function Profile() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const name = queryParams.get('name');
  const age = queryParams.get('age');

  return (
    <div>
      <h2>{name}</h2>
      <p>{age}</p>
    </div>
  );
}

在上面的实例中，我们使用useLocation钩子来读取当前URL中的查询参数。然后，我们使用URLSearchParams API获取特定的参数值并将其呈现在UI中。

希望这篇文章对你在React应用程序中添加查询参数到URL有所帮助！