使用React Router时出现Invalid hook call错误该如何解决？

解决方案 #

你的代码写法符合react-router v6的使用规范，不存在语法逻辑错误，报错是依赖环境异常导致的，按以下步骤操作即可修复：

1. 清理冗余依赖并重新安装

• 删除项目根目录下的node_modules文件夹、package-lock.json文件（使用yarn的用户删除yarn.lock文件）
• 终端执行npm install重新拉取所有依赖
• 依赖安装完成后执行npm start启动项目测试

2. 升级react-router到稳定版

你当前使用的react-router-dom@6.0.1是v6的早期非正式版本，存在兼容性缺陷，可执行以下命令升级到最新稳定版：

npm install react-router-dom@latest

升级完成后重启项目即可。

可选：调整组件声明顺序

避免部分编译工具的函数声明提升逻辑异常，可将Home组件移到渲染逻辑之前，调整后的完整代码如下：

import React from "react";
import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";

import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";

function Home() {
  return (
    <div>
      <h1>Home route</h1>
    </div>
  );
}

ReactDOM.render(
  <Router>
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  </Router>,
  document.getElementById("root")
);

reportWebVitals();

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