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 case 沒有將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} />;
}