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

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

1. 使用 useSearchParams 挂钩获取当前位置的搜索参数。
2. 使用 delete() 方法删除每个查询参数，例如 searchParams.delete('q')。
3. 更新搜索参数，例如 setSearchParams(searchParams)。

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 函数的工作方式类似于 useNavigate 钩子中的导航函数，但仅适用于 URL 的搜索部分。

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

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

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

火焰兔

海报 链接