Question related to Error occuring while using router in react

Question

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

Codes:

Index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

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

App.js

import React from "react";
import Home from "./Home";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </div>
      <Switch>
        <Route path="/" exact></Route>
      </Switch>
    </Router>
  );
}

Home.js

import React from "react";

function Home() {
  return (
    <div>
      <h2>Hello You are at Home </h2>
    </div>
  );
}

export default Home;

Answer 1

Using react-router-dom v6 to define routes like this:

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

and in Home.js:

function Home() {
  return (
    <>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </div>
      <div>
        <h2>Hello You are at Home </h2>
      </div>
    </>
  );
}

So the problem was to separate Links from Router.