Javascript 元素类型无效：应为字符串(对于内置组件)或类函数(对于复合组件)，但GET：Object.在Reaction项目中

我正在构建一个Reaction应用程序来了解MUI机会，并在浏览器中收到以下错误:

元素类型无效:应为字符串(对于内置组件) 或者一个类/函数(用于复合组件)，但得到的是:Object.你 可能忘了从定义组件的文件中导出组件， 或者，您可能混淆了默认导入和命名导入.

判断渲染方法为App.错误:元素类型无效: 应为字符串(用于内置组件)或类/函数(用于 复合组件)，但得到的是:对象.你可能忘了出口 您的组件来自定义它的文件，或者您可能混合了 Up Default和Name Imports.

下面是我的App组件:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Navbar from './components/Navbar';
import routes from './routes';

const App = () => {
  return (
    <Router>
      <Navbar />
      <div className="container mt-4">
        <Routes>
          {routes.map((route, index) => (
            <Route key={index} path={route.path} element={route.component} />
          ))}
        </Routes>
      </div>
    </Router>
  );
};

export default App;

道路:

import Blog from "./pages/Blog";
import Home from "./pages/Home";
import Team from "./pages/Team";

const routes = [
  { path: '/', component: Home, exact: true }, // Use the component class/function, not JSX element
  { path: '/blog', component: Blog },
  { path: '/team', component: Team },
];

export default routes;

导航栏:

import React, { useState } from "react";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Button from "@mui/material/Button";
import { Link, useLocation } from "react-router-dom";
import HistoryDrawer from "./HistoryDrawer";

const Navbar = () => {
  const [openDrawer, setOpenDrawer] = useState(false);
  const location = useLocation();

  const toggleDrawer = () => {
    setOpenDrawer(!openDrawer);
  };
  return (
    <React.Fragment>
      <AppBar position="static">
        <Toolbar>
          <Button
            color="inherit"
            component={Link}
            to="/"
            selected={location.pathname === "/"}
          >
            Home
          </Button>
          <Button
            color="inherit"
            component={Link}
            to="/blog"
            selected={location.pathname === "/blog"}
          >
            Blog
          </Button>
          <Button
            color="inherit"
            component={Link}
            to="/team"
            selected={location.pathname === "/team"}
          >
            Team
          </Button>
          <Button
            edge="start"
            color="inherit"
            aria-label="menu"
            onClick={toggleDrawer}
          >
            History
          </Button>
        </Toolbar>
      </AppBar>
      <HistoryDrawer toggleDrawer={toggleDrawer} openDrawer={openDrawer}/>
    </React.Fragment>
  );
};

export default Navbar;