Блог

Я новичок и следую инструкциям, ссылка на которые приведена ниже https://www.michaelburrows.xyz/react-sidebar — когда я запускаю npm start и получаю сообщение об ошибке

Ошибка: недопустимый тип элемента: ожидалась строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: не определено. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

Проверьте метод рендеринга приложения.

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.css

 body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
  

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")
);
  

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;
  

Contact.js

 import React from "react";

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

export default Contact;
  

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;
  

вот starktree

   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;
  

картинка здесь, вы можете ее увидеть

ошибка говорит, что был вызван 21 кадр stark, я воссоздаю весь проект, но он не работает, и я также экспортирую приложение defaut.Это снова не работает.Должен ли я обернуть sth?