React登录跳转报Element type is invalid错误如何解决？

问题根因&解决方案 #

1. 修复「Element type is invalid」报错 #

这个报错的核心原因是Redirect组件导入来源错误：Redirect是react-router-dom提供的组件，不属于React官方核心包，你从react中导入无法拿到对应组件，值为undefined，渲染时触发类型错误。

具体修改：

修改App.js的导入逻辑：

// 原错误写法
// import { useContext,Redirect } from "react";
// 修正为：
import { useContext } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect // 把Redirect移到这里导入
} from "react-router-dom";

同时修正JSX中组件标签的多余空格：把< Home/>、< Login/>这类写法改为<Home/>、<Login/>，避免解析异常。

2. 修复AuthContext导入&不生效问题 #

你定义的AuthContext是命名导出（export const AuthContext），所以必须用带花括号的命名导入写法，你最开始的import {AuthContext} from "./Context/AuthContext"是正确的，不需要修改：

• 不带花括号的导入仅适用于export default的默认导出，所以会提示没有默认导出的报错
• 用require的写法需要手动取导出对象的属性：const { AuthContext } = require("./Context/AuthContext.js")，否则拿到的是整个导出模块对象，不是Context实例，自然不会生效。

Context不生效的核心原因是你没有用自定义的AuthContextProvider包裹App组件，useContext默认只能拿到createContext时传入的初始值，无法响应登录状态更新。

具体修改：

修改项目入口文件（通常是src/index.js）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// 新增导入AuthContextProvider
import { AuthContextProvider } from "./Context/AuthContext";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  {/* 用Provider包裹App组件，全局共享Context状态 */}
  <AuthContextProvider>
    <App />
  </AuthContextProvider>
);

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