React useHistory Hook编译报错：函数header非组件或自定义Hook

咱们先拆解这个报错的核心原因：React对函数组件和自定义Hook的命名有严格要求——必须以大写字母开头，你的header函数是小写开头，React没法识别它是合法的React函数组件，自然就不允许在里面调用useHistory Hook啦。

接下来给你一步步修正代码：

1. 修正组件命名 #

把function header()改成function Header()，导出的时候也对应改成export default Header，这是让React识别它为组件的关键一步。

2. 修复Link组件的错误用法 #

你当前的代码里有两个明显问题：

• Link组件本身就是可点击的导航元素，不需要再嵌套<a>标签，这会导致HTML结构不规范，甚至可能引发导航冲突
• onClick={history.push('/auth/login')}这种写法会在组件渲染时立即执行push，而不是点击时触发，而且其实用Link的to属性就足够完成导航，完全不需要额外调用useHistory

修正后的简洁版代码 #

import { Link } from 'react-router-dom'

function Header() {
  // 没有额外逻辑的话，直接去掉useHistory的引入和声明即可
  return (
    <header>
      <div className="header_buttons">
        <Link to='/auth/login' className='primary-link'>
          Login
        </Link>
      </div>
    </header>
  )
}

export default Header

如果需要手动操作history的场景（比如点击前先执行逻辑） #

如果你的业务需要点击按钮时先做一些操作（比如表单验证、状态更新）再导航，那修正组件名后就可以正常使用useHistory了，同时要把onClick改成函数形式：

import { useHistory } from 'react-router-dom'

function Header() {
  let history = useHistory()

  const handleLoginClick = () => {
    // 这里可以添加点击前的自定义逻辑
    history.push('/auth/login')
  }

  return (
    <header>
      <div className="header_buttons">
        <button onClick={handleLoginClick} className='primary-link'>
          Login
        </button>
      </div>
    </header>
  )
}

export default Header

总结一下 #

• React函数组件必须大写开头，这是Hook规则的硬性要求之一
• 优先使用Link组件的to属性完成导航，避免不必要的嵌套和history调用，让代码更简洁规范

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