React项目中使用react-router-dom时，authPage组件调用useState触发hooks规则报错

AI 小北

2026-5-8

解决React Hook "useState"调用不符合规则的错误

嘿，这个问题我之前也踩过坑！错误提示已经说得很清楚了——你调用useState的authPage函数，不被React识别为合法的函数组件或自定义Hook，所以触发了Hook规则的校验错误。

问题根源

React对函数组件和自定义Hook有严格的命名规范：

React函数组件的名字必须首字母大写（比如AuthPage），这样React才能把它识别为组件而不是普通函数。
自定义Hook函数必须以use开头（比如useAuth），这是Hook的命名约定，也是ESLint校验Hook规则的依据。

你的authPage是小写开头，React只会把它当成普通JavaScript函数，而Hook只能在组件或自定义Hook里调用，所以就报错了。

快速修复方案

1. 把组件名改成首字母大写

把你的组件函数从authPage改成AuthPage：

错误的写法：

// 错误：小写开头，React不认为这是组件
function authPage() {
  const [state, setState] = useState('');
  return <div>Auth Page</div>;
}
export default authPage;

修正后的写法：

// 正确：首字母大写，React识别为组件
function AuthPage() {
  const [state, setState] = useState('');
  return <div>Auth Page</div>;
}
export default AuthPage;

2. 同步更新路由配置里的组件引用

在你的react-router-dom路由配置中，确保使用的是大写的AuthPage：

import { Routes, Route } from 'react-router-dom';
import AuthPage from './AuthPage'; // 导入的时候也要对应大写的名字

function App() {
  return (
    <Routes>
      {/* 这里要使用大写的组件 */}
      <Route path="/auth" element={<AuthPage />} />
    </Routes>
  );
}