如何使用 React 路由器删除查询参数

作者

使用 React 路由器删除查询参数

How to remove query params using React router

使用 React 路由器删除查询参数：

  1. 使用useSearchParams挂钩获取当前位置的搜索参数。
  2. 使用该delete()方法删除每个查询参数，例如
    searchParams.delete('q')。
  3. 更新搜索参数，例如setSearchParams(searchParams).
应用程序.js
import {useSearchParams} from 'react-router-dom';

export default function App() {
  const [searchParams, setSearchParams] = useSearchParams();

  const removeQueryParams = () => {
    const param = searchParams.get('q');

    if (param) {
      // 👇️ delete each query param
      searchParams.delete('q');

      // 👇️ update state after
      setSearchParams(searchParams);
    }
  };

  const handleChange = event => {
    setSearchParams({q: event.target.value});
  };

  console.log(searchParams.get('q'));

  return (
    <div>
      <button onClick={removeQueryParams}>Remove query param</button>

      <input id="search" autoComplete="off" onChange={handleChange} />
    </div>
  );
}

删除查询参数

我们可以使用
useSearchParams挂钩来管理 React 路由器 v6 及更高版本中的查询参数。

该钩子用于读取和修改当前位置的 URL 中的查询字符串。

它返回一个包含 2 个元素的数组 –
const [searchParams, setSearchParams] = useSearchParams()。

第一个元素是一个对象，我们可以使用它来获取查询参数的值，第二个元素是一个函数，它接受一个键值对对象，并将查询参数设置为该对象。

该setSearchParams函数的工作方式类似于useNavigatenavigate挂钩中的函数
，但仅适用于 URL 的搜索部分。

我们必须使用
URLSearchParams.delete()
方法来删​​除每个查询参数。

请注意，仅删除查询参数是不够的。我们必须调用该setSearchParams方法，例如，在我们删除查询参数之后。 setSearchParams(searchParams)

setSearchParams我们从钩子中得到的方法useSearchParams用于更新路由的查询参数。

–

发表评论