React-Router-Dom v6.12报错：未使用Hook却触发Hook相关错误

一、核心报错原因排查 #

• 所有React Router相关Hook（useLocation/useNavigate等）必须在路由上下文包裹的组件顶层调用，不能在组件外部、条件判断或嵌套函数中使用。
• 导航栏组件必须放在BrowserRouter或RouterProvider内部，否则无法获取路由上下文触发Hook报错。

二、两种路由配置的正确实现 #

1. BrowserRouter 配置方式 #

App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './pages/Home';
import Blog from './pages/Blog';
import About from './pages/About';

function App() {
  return (
    <Router>
      {/* Navbar必须置于Router内部，才能访问路由上下文 */}
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

Navbar.jsx（使用NavLink实现激活效果）

import { NavLink } from 'react-router-dom';

function Navbar() {
  // 自定义激活样式
  const activeStyle = {
    color: '#ff4444',
    fontWeight: 'bold',
    borderBottom: '2px solid #ff4444'
  };

  return (
    <nav>
      <NavLink 
        to="/" 
        style={({ isActive }) => isActive ? activeStyle : undefined}
        end {/* 精确匹配根路径，避免子路径激活根链接 */}
      >
        首页
      </NavLink>
      <NavLink 
        to="/blog" 
        style={({ isActive }) => isActive ? activeStyle : undefined}
      >
        博客
      </NavLink>
      <NavLink 
        to="/about" 
        style={({ isActive }) => isActive ? activeStyle : undefined}
      >
        关于
      </NavLink>
    </nav>
  );
}

export default Navbar;

2. CreateBrowserRouter + RouterProvider 配置方式 #

App.js

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './pages/Home';
import Blog from './pages/Blog';
import About from './pages/About';

// 定义带共享布局的路由
const router = createBrowserRouter([
  {
    element: <Navbar />,
    children: [
      { path: "/", element: <Home /> },
      { path: "/blog", element: <Blog /> },
      { path: "/about", element: <About /> },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

Navbar.jsx（需添加Outlet渲染子路由内容）

import { NavLink, Outlet } from 'react-router-dom';

function Navbar() {
  const activeStyle = {
    color: '#ff4444',
    fontWeight: 'bold',
    borderBottom: '2px solid #ff4444'
  };

  return (
    <div>
      <nav>
        <NavLink 
          to="/" 
          style={({ isActive }) => isActive ? activeStyle : undefined}
          end
        >
          首页
        </NavLink>
        <NavLink 
          to="/blog" 
          style={({ isActive }) => isActive ? activeStyle : undefined}
        >
          博客
        </NavLink>
        <NavLink 
          to="/about" 
          style={({ isActive }) => isActive ? activeStyle : undefined}
        >
          关于
        </NavLink>
      </nav>
      {/* 子路由内容会渲染在此处 */}
      <Outlet />
    </div>
  );
}

export default Navbar;

三、依赖版本校验 #

确保package.json中依赖版本符合要求（React 18+ 适配Router v6.12）：

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.12.1"
  }
}

四、常见错误规避 #

• 不要将Navbar放在路由上下文外部，否则无法触发激活状态且会报Hook错误。
• 根路径的NavLink必须加end属性，避免所有子路径激活根链接。
• 禁止在循环、条件判断或嵌套函数中调用React Router Hook，必须放在组件顶层作用域。

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