React Router v6.12.1中useSearchParams/useNavigate报错：Object(...) is not a function

以下是几种常见的排查和解决方向：

• 确保组件在Router上下文范围内
  React Router的所有hooks（包括useSearchParams、useNavigate）必须在BrowserRouter（或HashRouter等其他Router组件）提供的上下文环境中使用。如果你的组件没有被Router包裹，就会触发这个错误。

  正确结构示例：

  import { BrowserRouter, Routes, Route } from 'react-router-dom';
  import YourComponent from './YourComponent';
  
  function App() {
    return (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<YourComponent />} />
        </Routes>
      </BrowserRouter>
    );
  }
  

• 检查hooks的导入路径
  确认你是从react-router-dom而非react-router导入这些hooks。useSearchParams、useNavigate都是react-router-dom提供的API，从react-router导入会导致错误。

  正确导入方式：

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

• 验证依赖版本一致性
  即使你标注了react-router-dom@6.12.1，也要确保react-router的版本和react-router-dom完全一致。两个包版本不匹配会引发内部API兼容问题。

  可删除依赖文件后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

  或直接指定统一版本安装：

  npm install react-router@6.12.1 react-router-dom@6.12.1
  

• 确认hooks的使用场景
  Hooks只能在函数组件的顶层作用域或自定义Hooks中调用，不能在类组件、普通函数、条件判断或循环中使用。比如以下写法是错误的：

  // 错误示例：在条件判断内使用hooks
  function YourComponent() {
    if (true) {
      const [searchParams] = useSearchParams();
    }
    return <div>...</div>;
  }
  

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