React项目引入react-router报无效Hook调用错误，该如何修复？

错误根因 #

你遇到的Invalid hook call报错由react-router v6语法使用错误+组件写法错误共同导致，具体问题如下：

• react-router v6已废弃Route组件的component属性，必须使用element属性传入组件实例
• Main、Users、Contacts三个组件未添加return语句，JSX内容没有被正确返回，属于无效函数组件，导致react-router内部hook无法识别到合法的组件执行上下文
• 三个Route配置的path完全重复，相同路径下只会渲染第一个匹配的组件，无法实现多页面跳转
• react-router v6的Route默认开启精确匹配，不需要额外添加exact属性

依赖排查（代码修复后仍报错可执行） #

1. 删除项目下的node_modules文件夹、package-lock.json（或yarn.lock）文件
2. 重新执行npm install或yarn install安装依赖，确保项目中只有一份react、react-dom、react-router-dom副本
3. 执行npm ls react检查react版本，存在多版本时手动统一版本即可

修复后完整代码 #

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

export default function App() {
  return (
    <div>
      <Router>
        {/* 导航跳转入口 */}
        <header style={{display: "flex", gap: "24px", padding: "16px"}}>
          <Link to="/">首页</Link>
          <Link to="/users">用户页</Link>
          <Link to="/contacts">联系人页</Link>
        </header>
        {/* 路由页面渲染区域 */}
        <main>
          <Routes>
            <Route path="/" element={<Main />} />
            <Route path="/users" element={<Users />} />
            <Route path="/contacts" element={<Contacts />} />
          </Routes>
        </main>
      </Router>
    </div>
  );
}

const Main = () => {
  return (
    <div>
      <h1>I am Main page! Hello user!</h1>
    </div>
  );
};
const Users = () => {
  return (
    <div>
      <h1>I am Users page! Hello user!</h1>
    </div>
  );
};
const Contacts = () => {
  return (
    <div>
      <h1>I am Contacts page! Hello user!</h1>
    </div>
  );
};

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