如何在React Router V6中使用<Route>保留查询参数？

Question

我在路线上没有看到任何提及“搜索”参数 https://reactrouter.com/en/main/route/route

目前，至少对于我的项目来说，当匹配和应用新路由时，参数会丢失。

有人知道确保在路线更改后重新应用任何现有搜索参数的最佳方法吗？

Answer 1

我为此目的创建了简单的钩子。看起来效果不错。

usePreserveQueryParamsNavigate.ts：

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

export const usePreserveQueryParamsNavigate = () => {
    const navigate = useNavigate();
    const { search } = useLocation();

    return (path: string) => {
        navigate(path + search);
    };
};

在组件中

import { usePreserveQueryParamsNavigate } from 'src/hooks/usePreserveQueryParamsNavigate';

const navigate = usePreserveQueryParamsNavigate();

navigate('./route');