使用useSearchParams重定向遇导入错误：react-router-dom无该导出成员

问题核心原因 #

useSearchParams是react-router-dom v6才新增的Hook，你的项目当前安装的是v5或更低版本，所以会提示找不到该导出成员。

解决方案 #

1. 检查当前依赖版本
   在项目根目录执行命令查看版本：

   # npm
   npm list react-router-dom
   # yarn
   yarn list react-router-dom
   

   若版本号低于6.x，必须升级到v6版本。

2. 升级react-router-dom到v6
   执行对应包管理器的升级命令：

   # npm
   npm install react-router-dom@latest
   # yarn
   yarn add react-router-dom@latest
   

   注意：v6和v5的路由API有不少差异，比如useHistory替换为useNavigate，Route组件的component/render属性改为element，升级后需要同步调整项目中相关路由代码。

3. 同步升级TypeScript类型依赖（TS项目）
   如果是TypeScript项目，还需要更新类型包避免类型报错：

   # npm
   npm install @types/react-router-dom@latest --save-dev
   # yarn
   yarn add @types/react-router-dom@latest --dev
   

基础使用示例 #

升级完成后，就可以正常使用useSearchParams来处理URL参数和跳转：

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

function RedirectComponent() {
  const [, setSearchParams] = useSearchParams();
  const navigate = useNavigate();

  // 方式1：通过setSearchParams设置参数并跳转当前路由
  const jumpWithParams = () => {
    setSearchParams({ id: '456', type: 'detail' });
  };

  // 方式2：直接用navigate跳转到指定URL并携带参数
  const jumpToTarget = () => {
    navigate('/user/profile?userId=789');
  };

  return (
    <div>
      <button onClick={jumpWithParams}>带参数跳转当前页</button>
      <button onClick={jumpToTarget}>跳转到用户详情页</button>
    </div>
  );
}

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