React中useNavigate需在<Router>上下文的报错及路由跳转问题

1. 确保SearchBar组件处于上下文内 #

这个报错的核心原因是**useNavigate必须在Router组件的包裹范围内调用**。你当前把路由定义在Cards组件里，但如果SearchBar是在Router外层渲染的，就会触发这个错误。

检查并调整组件层级：

• 错误示例（SearchBar在Router外）：

  function App() {
    return (
      <>
        <SearchBar />
        <BrowserRouter>
          <Cards /> {/* 路由定义在此 */}
        </BrowserRouter>
      </>
    )
  }
  

• 正确层级（所有需要路由功能的组件都被Router包裹）：

  function App() {
    return (
      <BrowserRouter>
        <SearchBar />
        <Cards /> {/* 路由定义在此 */}
      </BrowserRouter>
    )
  }
  

2. 替代方案：通过props传递导航函数 #

如果无法调整组件层级，或者不想让SearchBar直接依赖Router上下文，可以从Router内的父组件把导航函数传进去：

• 在Cards组件（Router内的组件）中调用useNavigate，并传递给SearchBar：

  import { useNavigate } from 'react-router-dom';
  
  function Cards() {
    const navigate = useNavigate();
  
    return (
      <>
        {/* 其他路由相关代码 */}
        <SearchBar onEnterPress={() => navigate('/SearchResult')} />
      </>
    )
  }
  

• 在SearchBar组件中直接使用props传入的函数，同时阻止回车键默认刷新行为：

  function SearchBar({ onEnterPress }) {
    const handleKeyDown = (e) => {
      if (e.key === 'Enter') {
        e.preventDefault(); // 阻止页面刷新
        onEnterPress();
      }
    };
  
    return <input type="text" onKeyDown={handleKeyDown} />;
  }
  

3. 另一种替代：使用组件（适用于类组件或非钩子场景） #

如果SearchBar是类组件，或者更倾向于用组件方式实现跳转，可以通过状态控制渲染组件：

import { Navigate } from 'react-router-dom';
import { useState } from 'react';

function SearchBar() {
  const [toSearchResult, setToSearchResult] = useState(false);

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      setToSearchResult(true);
    }
  };

  if (toSearchResult) {
    return <Navigate to="/SearchResult" replace />; // replace可选，用于控制是否替换历史记录
  }

  return <input type="text" onKeyDown={handleKeyDown} />;
}

注意：这种方式下，SearchBar仍然需要处于Router上下文内。

不管用哪种方案，必须调用e.preventDefault()阻止回车键的默认行为，否则浏览器会触发页面刷新，破坏单页应用的跳转逻辑。

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