基于 React Router 的查询参数处理

基于 React Router 的查询参数处理

React Router 是一款流行的前端路由库，它可以帮助开发者快速构建单页面应用。在使用 React Router 的过程中，我们经常需要获取 URL 中的查询参数，以便我们对这些参数进行处理。本文将介绍如何使用 React Router 获取查询参数，以及如何将查询参数传递给 React Router 的组件。

在 React Router 中，我们可以通过 useLocation hook 获取当前页面的 URL 信息。useLocation hook 的返回值为一个 Location 对象，其中包含了当前页面的 URL。我们可以通过 location.search 属性获取到 URL 中的查询参数。

import { useLocation } from'react-router-dom';

function App() {
  const location = useLocation();
  const { search } = location;

  return (
    <div>
      <h1>基于 React Router 的查询参数处理</h1>
      <p>你可以通过 `location.search` 获取到 URL 中的查询参数，例如：</p>
      <ul>
        <li>搜索关键词：<input type="text" name="search" /> </li>
        <li>书名：<input type="text" name="book" /> </li>
        <li>作者：<input type="text" name="author" /> </li>
      </ul>
      <ul>
        {Object.keys(search.location.params).map(key => (
          <li key={key}>
            <input type="text" name={key} />
          </li>
        ))}
      </ul>
    </div>
  );
}

在上面的代码中，我们通过 location.search 获取到了查询参数 search，然后我们遍历 search.location.params 对象，获取到了所有查询参数。最后我们将这些查询参数渲染到了页面上。

假设我们有一个名为 Search 的组件，它需要接收一个查询参数才能正常工作。我们可以通过 useHistory hook 获取到当前页面的历史记录，然后将查询参数作为参数传递给 Search 组件。

import { useHistory } from'react-router-dom';
import { useLocation } from'react-router-dom';

function Search() {
  const history = useHistory();
  const location = useLocation();
  const { search } = location;

  const handleSearch = event => {
    event.preventDefault();
    const query = event.target.value;
    history.push(search.location.pathname + '?q=' + query);
  };

  return (
    <div>
      <input type="text" name="q" />
      <button onClick={handleSearch}>搜索</button>
    </div>
  );
}

在上面的代码中，我们通过 useHistory hook 获取到当前页面的历史记录，然后将查询参数 q 存储在 handleSearch 函数中。当用户点击搜索按钮时，我们通过 history.push 方法将查询参数添加到 URL 中，并将其作为参数传递给 Search 组件。

本文介绍了如何使用 React Router 获取查询参数，并介绍了如何将查询参数传递给 React Router 的组件。通过使用 useLocation 和 useHistory hooks，我们可以方便地获取 URL 中的查询参数，并将它们传递给组件进行处理。这对于构建复杂的单页面应用非常有用。