React Navbar多页面跳转及useNavigate()报错解决方法

这个错误的核心原因是：你调用useNavigate()的<Navbar>组件没有被React Router的<Router>（如BrowserRouter）组件包裹。useNavigate依赖路由上下文提供的导航功能，只有在Router组件的子树内才能正常工作。

修复步骤 #

1. 检查App.js的组件层级

打开你的App.js，确认<Router>组件是否包裹了整个应用，尤其是需要使用useNavigate的<Navbar>。

举个错误的层级示例（Navbar在Router外）：

// 错误示例：Navbar在Router外部
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './Home';
import About from './About';

function App() {
  return (
    <div>
      <Navbar /> {/* 这里在Router外面，无法获取路由上下文 */}
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Router>
    </div>
  );
}

2. 将Navbar移到Router内部

把<Navbar>放到<Router>组件的子节点中，确保它处于路由上下文范围内：

// 正确示例：Navbar在Router内部
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Navbar /> {/* 现在在Router内部，可以正常使用useNavigate */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

3. 确认Navbar中的useNavigate使用正确

在Navbar.js中，确保你正确导入并使用useNavigate：

// Navbar.js 示例
import { useNavigate } from 'react-router-dom';

function Navbar() {
  const navigate = useNavigate();

  const handleGoHome = () => {
    navigate('/');
  };

  const handleGoAbout = () => {
    navigate('/about');
  };

  return (
    <nav>
      <button onClick={handleGoHome}>首页</button>
      <button onClick={handleGoAbout}>关于我们</button>
    </nav>
  );
}

额外注意事项 #

• 如果你需要在Router外的组件使用导航功能，可以考虑将导航逻辑提升到Router内的父组件，通过props传递方法给外层组件；或者使用Navigate组件进行跳转（但这种场景较少）。
• 确保你安装的是React Router v6版本（useNavigate是v6的钩子，v5及以前用的是useHistory）。

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