React开发导航栏出现Invalid hook call错误如何排查解决？

核心错误原因及修复步骤 #

• 1. 缺失styled-components导入
     你在NavbarElements.js中使用了styled语法创建样式组件，但未导入styled-components依赖，也未提前安装该依赖，是触发报错的最直接原因。
     修复：先执行依赖安装命令：

  npm install styled-components react-router-dom
  

  然后在NavbarElements.js第一行补充导入语句：

  import styled from 'styled-components'
  

• 2. React Router API不匹配
     你使用的activeStyle是react-router-dom v5的废弃API，当前默认安装的v6版本已移除该属性，调用废弃API会触发内部hook调用异常。
     修复：删除Navbar组件中NavLink标签上的activeStyle属性即可，你已经在styled样式中定义了.active类的高亮样式，react-router-dom v6会自动为当前激活的导航项添加active类，不需要额外配置。
• 3. 缺失Router上下文包裹
     所有react-router-dom的组件必须在<BrowserRouter>的上下文内调用，如果你的Navbar组件外层没有包裹Router组件，NavLink内部调用的路由hook就会触发位置异常报错。
     修复：在入口文件（通常是App.js或index.js）中用BrowserRouter包裹所有路由相关组件，示例：

  import { BrowserRouter } from 'react-router-dom'
  import Navbar from './Navbar'
  
  function App() {
    return (
      <BrowserRouter>
        <Navbar />
        {/* 其他路由组件 */}
      </BrowserRouter>
    )
  }
  

• 4. 代码笔误修正
     你现有代码中存在两处拼写错误，虽不会直接触发hook报错，但会导致样式异常：
  • padding: 0.5rem calc((100wv - 1000px) /2); 中的100wv改为100vw（视口宽度单位为vw）
  • padding: 0 lrem; 中的lrem改为1rem（数字1打错成了字母l）

修改后完整代码 #

NavbarElements.js #

import styled from 'styled-components'
import { NavLink as Link } from 'react-router-dom';

export const Nav = styled.nav`
    background: #000;
    height: 80px;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem calc((100vw - 1000px) /2);
    z-index: 10;
`;
export const NavLink = styled(Link)`
    color: #fff;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0 1rem;
    height: 100%;
    cursor: pointer;

    &.active{
        color: #15cdfc;
    }
`;
export const NavMenu = styled.div`
    display: flex;
    align-items: center;
    margin-right: 24px;

    @media screen and (max-width:768px) {
        display: none;
    }
`;

Navbar/index.js #

import { Nav, NavLink, NavMenu } from './NavbarElements'

const Navbar = () => {
    return (
        <>
            <Nav>
                <NavLink to='/'>
                    <h1>Logo</h1>
                </NavLink>
                <NavMenu>
                    <NavLink to='/home'>
                        Home
                    </NavLink>
                    <NavLink to='/about'>
                        About
                    </NavLink>
                </NavMenu>
            </Nav>
        </>
    );
};

export default Navbar;

可选排查项 #

如果完成以上操作仍报错，检查package.json中react和react-dom的版本号是否一致，版本不匹配也会触发该报错，统一版本后重新安装依赖即可解决。

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