如何修复React JS中出现的Invalid hook call无效钩子调用报错

安全阿岳

2026-9-26

问题原因及解决方案

你代码里的语法错误触发了Hook调用规则校验，所有可复现的问题点和修复方案如下：

你使用的是react-router-dom v6版本，Route组件的渲染属性已从旧版本的component更改为element，属性值需要传入组件实例<List />，不能直接传组件构造函数List
Route的path属性填写的是浏览器访问的路由路径，不是本地组件的文件路径，比如要配置首页访问就填path="/"，配置列表页访问就填path="/list"
你把JS注释直接写在了return语句的括号内、和JSX节点同级的位置，不符合JSX语法规范，JSX内部的注释必须包裹在{}中，或者直接移到return语句外部，错误的注释位置会导致渲染逻辑异常
你注释掉的废弃代码里还误写了不存在的components属性，即使是旧版本react-router-dom也只支持单数component属性

修正后可运行代码

import './App.css';
import {BrowserRouter as Router, Route ,Routes} from 'react-router-dom'
import Container from 'react-bootstrap/Container';
//Pages
import Header from './Pages/Header'
import List from './Pages/List';

function App() {
  return (
    <Router>
      <Container>
        <div className="App">
          <Header />
          <div className="Content">
            <Routes>
              {/* path根据你实际需要的路由规则调整即可 */}
              <Route path="/" element={<List />} />
            </Routes>
          </div>
        </div>
      </Container>
    </Router>
  );
}

export default App;

如果修改后仍有报错，额外检查两个点：