以编程方式更新 React 路由器中的查询参数

React 2年前 58

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

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

以编程方式更新 React 路由器中的查询参数

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>
  );
}