如何使用 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>
  );
}

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

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

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

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

setSearchParams 函数的工作方式类似于 useNavigate 钩子中的导航函数,但仅适用于 URL 的搜索部分。

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

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