如何在remix-run/react router中通过router实例携带查询参数导航？

我正在使用React Router新数据API中的createBrowserRouter，现有代码如下：

router.tsx #

import { createBrowserRouter } from 'react-router-dom';
import { allRoutes } from './allRouts.tsx';
import type { Router } from '@remix-run/router/dist/router';

export const router: Router = createBrowserRouter(allRoutes);

routerAction.tsx #

export const routerAction = async ( 
    value: string | number
): Promise<void> => { 
            return router.navigate(value.toString());
    }
};

根据类型文档描述：

A Router instance manages all navigation and data loading/mutations

我想了解如何通过该router实例实现类似useSearchParams的带查询参数的导航？

要通过createBrowserRouter生成的Router实例实现带查询参数的导航，你可以用以下两种方式实现，效果和useSearchParams配合导航的逻辑一致：

1. 直接拼接查询参数 #

如果查询参数结构简单，可直接手动拼接在目标路径后：

export const routerAction = async (value: string | number): Promise<void> => {
  // 示例：跳转至/target路径并携带id、name两个查询参数
  const targetPath = `/target?id=${value.toString()}&name=demo`;
  return router.navigate(targetPath);
};

2. 使用URLSearchParams构建（推荐） #

对于多参数或复杂场景，用URLSearchParams构建查询参数更规范，避免手动拼接的格式错误：

export const routerAction = async (value: string | number): Promise<void> => {
  const params = new URLSearchParams();
  params.set("id", value.toString());
  params.set("name", "demo");
  // 生成带结构化查询参数的路径
  const targetPath = `/target?${params.toString()}`;
  return router.navigate(targetPath);
};

额外配置 #

router.navigate同样支持传入配置项，比如设置replace: true替换当前历史记录，和组件内useNavigate的用法一致：

router.navigate(targetPath, { replace: true });

内容的提问来源于stack exchange，提问作者Chen Peleg