Блог

Я пытаюсь запустить проект react и использовать react-router-dom

index.js файл выглядит следующим образом

 import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

console.log(App);

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

И App.js

 import React from "react";
import { Switch, Route } from "react-router-dom";
import Home from "./pages/home.js";

export default function App() {
  return (
    <main>
      <Switch>
        <Route exact path="/home" component={(props) => <Home {...props} />} />
      </Switch>
    </main>
  );
}
 

И я получил сообщение ниже.

 ×
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `component`.
 

На самом деле я сделал console.log (приложение) в index.js а приложение — это функция. И когда я заменяю App.js как показано ниже, это работает.

 import React from "react";


export default function App() {
  return <div className="App">hello</div>;
}
 

Это мои зависимости.

     "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
 

Я пытаюсь выяснить, в чем именно проблема, но не могу найти….

Заранее благодарим вас за помощь!