Reactjs 错误显示21个斯塔克帧被调用

我是新手，遵循教程，链接如下 当我运行npm时，启动并获取错误

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

检查应用程序的渲染方法

App.js

navigation-component/ 
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Sidebar from "./components/Sidebar";
import Home from "./pages/Home";
import Services from "./pages/Services";
import Contact from "./pages/Contact";
import "./App.css";

function App() {
  return (
    <>
      <Router>
        <Sidebar />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/services" component={Services} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Router>
    </>
  );
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

从“React”导入React；
从“react dom”导入react dom；
从“/App”导入应用程序；
ReactDOM.render(

错误说调用了21个stark帧，我重新创建了整个项目，但它不工作，我还导出了defaut应用程序。它再次不工作。我是否要包装某个东西？
看起来你导出/导入了
侧栏
，很好，但请仔细检查导入路径。检查
主页
、
服务
和
继续的导出和路径act
。您正在将它们作为默认导入导入，但它们是默认导出吗？是否可以包含它们的组件代码？从“React”导入React；函数服务（）{return（服务这是服务页面。
）；}导出默认服务；对不起，您是否可以更新并包含尽可能多的stacktrace，并让我们知道
应用程序中的哪一行有问题？（请记住，我们看不到行号）。stacktrace在那里，并且还提交了一个图片
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

 import React, { useState } from "react";
    import { Link } from "react-router-dom";
    import "./Sidebar.css";
    function Sidebar() {
        const [sidebar, setSidebar] = useState(false);
        const showSidebar = () => setSidebar(!sidebar);
        return (
          <nav className={sidebar ? "sidebar active" : "sidebar"}>
            <button className="hamburger" type="button" onClick={showSidebar}>
              <div></div>
            </button>
            <ul onClick={showSidebar}>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/services">Services</Link></li>
              <li><Link to="/contact">Contact</Link></li>
            </ul>
          </nav>
        );
      }
      
      export default Sidebar;

import React from "react";

function Contact() {
  return (
    <div className="page">
      <h1>Contact</h1>
      <p>This is the contact page.</p>
    </div>
  );
}

export default Contact;

import React from "react";

function Services() {
  return (
    <div className="page">
      <h1>Services</h1>
      <p>This is the services page.</p>
    </div>
  );
}

export default Services;

  2 | import ReactDOM from "react-dom";
  3 | import App from "./App";
  4 | 
> 5 | ReactDOM.render(
  6 |   <React.StrictMode>
  7 |     <App />
  8 |   </React.StrictMode>,

 781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;


147 |       );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;