迹忆客 专注技术分享

使用 useSearchParams 钩子以编程方式更新 React 路由器中的查询参数，例如 setSearchParams({query: 'myValue'})。 useSearchParams 钩子用于读取和修改当前位置的 URL 中的查询字符串。

import React from 'react';
import {
  useSearchParams,
} from 'react-router-dom';

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

  const handleClick = () => {
    setSearchParams({myParam: 'hello_world'});
  };

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

  console.log(searchParams.get('myParam'));
  console.log(searchParams.get('query'));

  return (
    <div>
      <button onClick={handleClick}>Update Query params</button>

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

我们必须确保在 index.js 文件中使用 Router 组件包装了我们的 App，以便使用任何 React 路由器钩子。

import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ wrap App in Router

root.render(
  <Router>
    <App />
  </Router>
);

代码片段显示了如何在单击按钮和更改输入字段时更新路由的查询参数。

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

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

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

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

如果我们需要使用查询参数以编程方式导航到不同的路由，请改用 useNavigate 钩子。

// 👇️ import useNavigate
import {useNavigate} from 'react-router-dom';

export default function App() {
  const navigate = useNavigate();

  const handleClick = () => {
    // 👇️ navigate programmatically
    navigate({pathname: '/about', search: '?query=abc&page=25'});
  };

  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}

我们将一个对象传递给 navigate 函数。 请注意，search 属性是一个完整的查询字符串。

当用户单击该按钮时，他们将导航到 /about?query=abc&page=25。