React使用useAuth Hook报错，请求问题原因分析及修复方案

问题原因 #

报错的核心是违反了React的命名规则：React函数组件的名称必须以大写字母开头，只有这样React才会将其识别为合法的React组件。你在Home.js中定义的组件是小写的home，React不会把它当作React函数组件处理，而Hook（如useAuth）仅允许在React函数组件或自定义Hook中调用，因此触发了该报错。

修复方法 #

只需将Home.js中的组件名称和导出语句里的名称统一改为大写的Home，符合React组件命名规范即可解决问题。

修改后的Home.js代码 #

import React from 'react'
import useAuth from '../context/useAuth'

// 组件名改为大写Home
function Home() {
    
    const { user } = useAuth();

  return (
    <div>home</div>
  )
}

// 导出也改为大写Home
export default Home

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