Javascript 检查'App'的渲染方法并调用21个stark帧

我是新手，下面是我的导师链接 当我流动的步骤，我运行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 (
    <>
     <Sidebar />
      <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(
,
document.getElementById（“根”）
);

sidebar.js

 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，{useState}来自“React”；
从“react router dom”导入{Link}；
导入“/Sidebar.css”；
函数边栏（）{
const[sidebar，setSidebar]=useState（false）；
const showSidebar=（）=>setSidebar（！sidebar）；
返回(

家
服务
接触

);
}
导出默认边栏；

Services.js

import React from "react";

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

export default Services;

从“React”导入React；
职能服务（）{
返回(
服务
这是服务页面

);
}
出口默认服务；

Contact.js 从“React”导入React

功能联系人（）{
返回(
接触
这是联系页面

);
}
导出默认联系人；

---

错误显示调用了21个stark帧

将边栏从路由器移动到外部父级，除路由和交换机以外的任何组件都应放置在路由器内。请检查您的家庭、服务和联系人文件，看看您是否已正确导出该文件，因为我在您的代码库马尔中找不到任何错误我发布了我的服务文件Piyush，把边栏放在这里对吗？我使用npm start，但它和以前一样，对我不起作用。事实上，我在一台新计算机上构建了一个新项目，就像这样。但它仍然不起作用

import React from "react";

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

export default Services;

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

export default Contact;