Javascript 反应错误：错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）

我曾试图通过类似的问题找到答案，但未能解决这个问题

运行react应用程序时，出现以下错误：

错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。 检查

应用程序的渲染方法

我的index.js文件如下所示：

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { AppProvider } from './context'
ReactDOM.render(
  <React.StrictMode>
    <AppProvider>
    <App />
    </AppProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
// import pages
import Home from "./pages/Home";
import About from "./pages/About";
import SingleCocktail from "./pages/SingleCocktail";
import Error from "./pages/Error";
// import components
import Navbar from "./components/Navbar";
function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/cocktail/:id">
          <SingleCocktail />
        </Route>
        <Route path="*">
          <Error />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

从“React”导入React
从“react dom”导入react dom
导入“./index.css”
从“./App”导入应用程序
从“./context”导入{AppProvider}
ReactDOM.render(
,
document.getElementById（'root'））
);

---

我的App.js文件如下所示：

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { AppProvider } from './context'
ReactDOM.render(
  <React.StrictMode>
    <AppProvider>
    <App />
    </AppProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
// import pages
import Home from "./pages/Home";
import About from "./pages/About";
import SingleCocktail from "./pages/SingleCocktail";
import Error from "./pages/Error";
// import components
import Navbar from "./components/Navbar";
function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/cocktail/:id">
          <SingleCocktail />
        </Route>
        <Route path="*">
          <Error />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
//导入页面
从“/pages/Home”导入主页；
从“/pages/About”导入关于；
从“/pages/SingleCocktail”导入SingleCocktail；
从“/pages/Error”导入错误；
//导入组件
从“/components/Navbar”导入导航栏；
函数App（）{
返回(
);
}
导出默认应用程序；

我本来有进口的问题，我可以解决，但我迷路了

---

关于看什么的任何要点都很好，谢谢：）

这是否回答了您的问题@不幸的是，两种方法都尝试了，但都出现了两个不同的错误。因此，当我将应用程序导入包装在花括号中，从“/app”导入{app}时，我得到以下错误：./src/index.js尝试导入错误：“app”未从“/app”导出。请检查所有其他组件

Home

，

About

，

SingleCocktail

，…-问题很可能就在那里。如果您想像您一样导入它们（

从…导入主页

），请确保它们都是

导出默认值

）。发现问题-它与my Home.js脚本有关-它需要稍微调整，但浏览器错误将我发送到一个完全不同的方向，感谢您的时间@rsmeral“它需要稍微调整”–你能为未来的读者描述一下吗？