如何修复React中react-router-dom的"Uncaught Error: Invariant failed"错误

这个错误几乎可以肯定是React Router v6+的API变更加上路由上下文缺失导致的——你用了旧版本的路由写法，但安装的是最新版的react-router-dom，而且Link组件没有在Router的上下文范围内。下面是一步步的修复方案：

1. 核心问题分析 #

• React Router v6彻底抛弃了旧的Route属性（component/render/children），改用element传递组件实例
• Route必须被包裹在Routes组件中，不能直接作为Router的子元素
• Link、路由钩子（比如useNavigate）必须在BrowserRouter的上下文里，否则会触发上下文缺失的不变量错误

2. 修改代码示例 #

第一步：把Router移到应用最顶层（比如index.js） #

这样整个应用都能共享路由上下文，避免Link找不到上下文的问题：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import Container3d from './Container3d';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <div className="app-wrapper">
      <App />
      <Container3d />
    </div>
  </Router>
);

第二步：更新Container3d的路由写法（用Routes和element） #

替换旧的component属性，用element传递组件实例，并且用Routes包裹所有Route：

// src/Container3d.js
import React, { Component } from 'react';
import { Routes, Route } from 'react-router-dom';
import Scene3d from './Scene3d';
import Model2 from './Model2';

class Container3d extends Component {
  render() {
    return (
      <div className="container3d">
        <Routes>
          {/* 用element={<Component />}替代component={Component} */}
          <Route path="/model-1" element={<Scene3d />} />
          <Route path="/model-2" element={<Model2 />} />
        </Routes>
      </div>
    );
  }
}

export default Container3d;

第三步：补全App.js的缺失导入（可选但必要） #

你的App组件漏了React和Component的导入，补上后才能正常运行：

// src/App.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <ul>
        <li>
          <Link to="/model-1">model-1</Link>
        </li>
        <li>
          <Link to="/model-2">model-2</Link>
        </li>
      </ul>
    );
  }
}

export default App;

3. 额外检查：版本兼容性 #

确保你的React和React Router版本匹配，比如React 18需要react-router-dom v6.3+，可以查看package.json：

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

如果还是有问题，尝试清除依赖缓存重新安装：

rm -rf node_modules package-lock.json
npm install

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