React Router 6，同时处理多个搜索参数

Question

我已经setSearchParams在 Parent 组件中使用了 hook，它query根据inputJSX 元素的输入进行设置。现在，我需要实现第二个搜索参数 = sortBy，但不要删除已经存在的query搜索参数，或者可能是我每次执行 If() 检查时需要执行的现有搜索参数。而且我现在还需要 if() 检查父元素的参数sortBy。我可能会在不同的 React 组件中引入更多的搜索参数 - 这会让代码变得混乱。

有没有更好的方法来使用 React Router 6 处理分散在项目中的多个搜索参数？

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

const titles = ['Name', 'Sex', 'Born', 'Died', 'Father', 'Mother', 'Slug'];

export const TableHead = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const query = searchParams.get('query');

  return (
    <tr className="person">
      {
        titles.map(el => (
          <th
            key={el}
            onClick={() => {
              if (query) {
                setSearchParams({ query, sortBy: el.toLowerCase() });
              } else {
                setSearchParams({ sortBy: el.toLowerCase() });
              }
            }}
          >
            {el}
          </th>
        ))
      }
    </tr>
  );
};

Answer 1

如果我理解您的问题/问题，您只想将另一个查询参数添加到现有的查询字符串中。您可以更新当前searchParams对象并使用它，而不是将搜索参数设置为全新的值。

例子：

export const TableHead = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const query = searchParams.get('query');

  return (
    <tr className="person">
      {titles.map(el => (
        <th
          key={el}
          onClick={() => {
            searchParams.set("sortBy": el.toLowerCase());
            setSearchParams(searchParams);
          }}
        >
          {el}
        </th>
      ))}
    </tr>
  );
};