reactjs - react-router-dom does not work. Element type invalid error

Question

I am trying to start a react project and to use react-router-dom

The index.js file looks like below

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

And the 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>
  );
}

And I got the message below.

×
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`.

Actually I did console.log(App) in the index.js and the App is a function. And when I replace the App.js as below, it works.

import React from "react";


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

These are my dependencies.

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

I am trying to find out what is the problem exactly but cannot find....

Thank you for help in advance!

Answer 1

等待大神答复