React开发Google克隆时useNavigate()上下文错误求助

问题根源 #

1. Search组件未处于Router上下文内：react-router-dom v6的路由钩子（包括useNavigate）仅能在被<BrowserRouter>/<HashRouter>等Router组件直接或间接包裹的组件中使用。如果你的Search组件是在Router外部渲染的，必然触发该错误。
2. useNavigate调用方式错误：v6中useNavigate返回的是一个函数，而非带push方法的对象，你写的navigate.push("/search")是v5的写法，v6不支持这种调用方式。

修复步骤 #

1. 确保Search组件被Router包裹 #

找到项目入口文件（如App.js或index.js），将所有用到路由钩子的组件放在<BrowserRouter>内部：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Search from './path/to/Search';
import SearchResults from './path/to/SearchResults';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Search />} />
        <Route path="/search" element={<SearchResults />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 修正useNavigate的调用逻辑 #

在Search组件中，把navigate.push("/search")改为直接调用函数：

const search = e => {
  e.preventDefault();
  dispatch({
    type: SET_SEARCH_TERM,
    term: input
  });
  console.log(input);
  navigate("/search"); // 移除.push，直接传入路径
};

3. 关于useHistory的说明 #

useHistory是react-router-dom v5的钩子，v6已弃用并替换为useNavigate，这也是你之前尝试useHistory无效的原因，确保项目使用的是v6版本的react-router-dom。

验证修复 #

重启项目后，点击搜索按钮即可正常跳转到/search页面，控制台不再出现该错误提示。

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