React运行报错TypeError: Class constructor RegisterPage cannot be invoked without 'new'如何解决

报错根因 #

TypeError: Class constructor RegisterPage cannot be invoked without 'new' 报错的核心原因是类组件被当成普通函数直接调用，没有通过JSX语法实例化，是React开发的高频常见错误，你可以按以下顺序排查修复：

可行解决方案 #

• 1. 优先检查组件调用位置

90%以上的该类报错都来自路由配置错误，尤其是使用React Router v6及以上版本时，不要直接把类组件本身传给渲染字段，必须用JSX语法包裹：
错误写法示例：

// 路由配置错误写法
const router = createBrowserRouter([
  {
    path: '/register',
    element: RegisterPage // 直接传类本身，未实例化
  }
])

正确写法：

// 路由配置正确写法
const router = createBrowserRouter([
  {
    path: '/register',
    element: <RegisterPage register={你的register处理函数} /> // 用JSX语法实例化，同时传入需要的props
  }
])
其他所有调用RegisterPage的位置，都必须使用`<RegisterPage />`格式，不能直接执行`RegisterPage()`或者将类作为普通渲染变量传递。
- #### 2. 修正babel配置（如果上一步未解决）
确认你的`package.json`或`babel.config.json`中的babel预设配置正确，不要启用冲突的类转换插件：
```json
{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"
    }],
    ["@babel/preset-react", {
      "runtime": "automatic" // React 17及以上版本用该配置，低版本可以替换为"classic"
    }]
  ]
}

• 3. 修复你当前组件内的隐藏bug

你当前的组件代码本身存在三个逻辑问题，虽然不是当前报错的诱因，但会导致后续表单功能异常，建议同步修改：

1. handleChange方法的setState逻辑错误，当前会把表单值存在state根节点，没有更新到user对象内：

handleChange(e) {
    const {name, value} = e.target;
    const { user } = this.state;
    this.setState({
        user: {
          ...user,
          [name]: value
        }
    });
}

2. 表单元素全部放在了form标签外部，导致提交事件无法触发，需要把所有form-group的内容移到<form>标签内部，同时补充提交按钮。
3. 密码校验的判断条件错误，当前判断的是firstName是否为空，需要改为判断password：

{submitted && !user.password &&
    <div className="help-block">Password is required</div>
}

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