React路由报错#130：元素类型无效问题求助

错误原因 #

你遇到的Uncaught Error: Element type is invalid错误，核心问题出在代码的switch语句中：当用户类型为administrador或franqueado时，你直接将Component变量赋值为已渲染的JSX元素（<div>Root: Vagas</div>），但React在使用<Component {...props} />语法时，要求Component必须是组件函数/类或者内置HTML标签字符串，而不是已经创建好的元素对象，这就导致了类型不匹配的错误。

修正方案 #

有两种可行的修正方式，选择其中一种即可：

方式一：将静态元素封装为组件 #

创建一个简单的组件函数来包裹静态JSX内容，保证Component变量始终指向组件类型：

import React from "react";
import { Route } from "react-router-dom";

import EmpresaVagas from "@/pages/Empresa/Vagas/Vagas";
import AlunoVagas from "@/pages/Aluno/Vagas/Vagas";
import GuestVagas from "@/pages/Guest/Vagas/Vagas";

// 封装静态内容为组件
const RootVagas = () => <div>Root: Vagas</div>;

export default function VagasRoute({ auth, ...rest }) {
  const { authenticated, data } = auth;

  if (!authenticated) {
    return <Route {...rest} render={props => <GuestVagas {...props} />} />;
  }

  const { tipo, empresa } = data;
  let Component;
  
  switch (true) {
    case tipo === "aluno":
      Component = AlunoVagas;
      break;
    case ["funcionario", "supervisor"].includes(tipo):
      // 合并重复逻辑
      Component = EmpresaVagas;
      break;
    case ["administrador", "franqueado"].includes(tipo):
      Component = RootVagas;
      break;
    default:
      // 添加默认分支，避免Component未定义
      Component = () => null;
  }

  return <Route {...rest} render={props => <Component {...props} />} />;
}

方式二：直接在render回调中返回对应元素 #

绕开Component变量的赋值，直接在Route的render回调里根据用户类型返回对应的内容，更直观且避免类型问题：

import React from "react";
import { Route } from "react-router-dom";

import EmpresaVagas from "@/pages/Empresa/Vagas/Vagas";
import AlunoVagas from "@/pages/Aluno/Vagas/Vagas";
import GuestVagas from "@/pages/Guest/Vagas/Vagas";

export default function VagasRoute({ auth, ...rest }) {
  const { authenticated, data } = auth;

  if (!authenticated) {
    return <Route {...rest} render={props => <GuestVagas {...props} />} />;
  }

  const { tipo, empresa } = data;

  return <Route {...rest} render={props => {
    switch (true) {
      case tipo === "aluno":
        return <AlunoVagas {...props} />;
      case ["funcionario", "supervisor"].includes(tipo):
        return <EmpresaVagas {...props} />;
      case ["administrador", "franqueado"].includes(tipo):
        return <div>Root: Vagas</div>;
      default:
        // 处理未匹配的用户类型，避免返回undefined
        return null;
    }
  }} />;
}

额外优化点 #

• 合并了funcionario/supervisor的重复逻辑，代码更简洁
• 添加了default分支，避免出现Component未定义或返回undefined的情况

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