在React App Route中缩小了React错误#130

Question

在我的应用程序中访问此路由时出现此错误

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

然而，在对应用程序的其他部分进行更新之前，它没有这个错误

这是我的代码

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 }) {
// idenficar se o usuario está logado
const { authenticated, data } = auth;
let Component;
if (!authenticated) {
Component = GuestVagas;
return <Route {...rest} render={props => <Component {...props} />} />;
}
const { tipo, empresa } = data;
// eslint-disable-next-line default-case
switch (true) {
case tipo === "aluno":
Component = AlunoVagas;
break;
case ["funcionario", "supervisor"].includes(tipo) && !empresa.is_escola:
Component = EmpresaVagas;
break;
case ["funcionario", "supervisor"].includes(tipo) && empresa.is_escola:
Component = EmpresaVagas;
break;
case ["administrador"].includes(tipo):
Component = <div>Root: Vagas</div>;
break;
case ["franqueado"].includes(tipo):
Component = <div>Root: Vagas</div>;
break;
}
return <Route {...rest} render={props => <Component {...props} />} />;
}

我希望我可以显示这个页面

Answer 1

问题是一些的switch情况没有设置Component是一个有效的React组件。最后两种情况是将Component设置为JSX文字。

export default function VagasRoute({ auth, ...rest }) {
// idenficar se o usuario está logado
const { authenticated, data } = auth;
let Component;
if (!authenticated) {
Component = GuestVagas;
return <Route {...rest} render={props => <Component {...props} />} />;
}
const { tipo, empresa } = data;
// eslint-disable-next-line default-case
switch (true) {
case tipo === "aluno":
Component = AlunoVagas;
break;
case ["funcionario", "supervisor"].includes(tipo) && !empresa.is_escola:
Component = EmpresaVagas;
break;
case ["funcionario", "supervisor"].includes(tipo) && empresa.is_escola:
Component = EmpresaVagas;
break;
case ["administrador"].includes(tipo):
Component = <div>Root: Vagas</div>; // <-- not a React component or function
break;
case ["franqueado"].includes(tipo):
Component = <div>Root: Vagas</div>; // <-- not a React component or function
break;
}
return <Route {...rest} render={props => <Component {...props} />} />;
}

一个简单的解决方案是将这些转换为返回JSX的函数，也就是React Function组件。

export default function VagasRoute({ auth, ...rest }) {
// idenficar se o usuario está logado
const { authenticated, data } = auth;
let Component;
if (!authenticated) {
return <Route {...rest} component={GuestVagas} />;
}
const { tipo, empresa } = data;
// eslint-disable-next-line default-case
switch (true) {
case tipo === "aluno":
Component = AlunoVagas;
break;
case ["funcionario", "supervisor"].includes(tipo) && !empresa.is_escola:
Component = EmpresaVagas;
break;
case ["funcionario", "supervisor"].includes(tipo) && empresa.is_escola:
Component = EmpresaVagas;
break;
case ["administrador"].includes(tipo):
case ["franqueado"].includes(tipo):
Component = () => <div>Root: Vagas</div>;
break;
}
return <Route {...rest} component={Component} />;
}