使用React Router DOM时组件不渲染，触发无效Hook调用警告

问题核心 #

使用Router、Routes、Route组件时，Home/Login组件无法渲染，控制台抛出Invalid hook call警告，错误定位在Router组件中；但直接渲染组件时显示正常。

解决方案 #

1. 替换为正确的路由容器组件 #

React Router v6+中，直接导入的Router是基础组件，需要手动传入history对象才能工作。推荐使用封装好的BrowserRouter（可保留Router别名以兼容现有代码结构），它内置浏览器历史管理逻辑，无需额外配置：

// 修改后的App组件代码
import Home from "./pages/main/Home";
import Login from "./pages/login/Login";
// 替换导入为BrowserRouter并设置别名Router
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

2. 确保React与依赖版本兼容 #

React Router v6要求React版本≥16.8.0（支持Hook特性），且react和react-dom版本必须完全一致：

• 查看当前依赖版本：

  npm list react react-dom react-router-dom
  

• 安装兼容的最新版本：

  npm install react@latest react-dom@latest react-router-dom@latest
  

3. 消除多份React实例 #

项目中存在多个React副本会导致Hook调用异常：

• 合并重复依赖：

  npm dedupe
  

• 重置依赖（若上述命令无效）：

  rm package-lock.json
  npm install
  

4. 遵守Hook使用规则 #

确保所有组件符合Hook规范：

• 组件名必须以大写字母开头（你的Home/Login组件已满足）
• 后续添加Hook时，禁止在条件判断、循环或嵌套函数内调用

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