BrowserRouter is not able to render the component-CodePudding

I have created a route '/' which renders a Home component but the component is not getting rendered.

Below is the error

react-dom.development.js:18970 The above error occurred in the <BrowserRouter> component:

    at BrowserRouter (http://localhost:3000/static/js/bundle.js:43555:5)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.

Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Below is the app.js code

import React from 'react';
import './App.css';
import {Route, BrowserRouter , Routes} from 'react-router-dom';
import Home from './pages/Home';



function App() {
  return (
    <div className="App">
      <BrowserRouter>
      <Routes>
      <Route exact path="/" element ={<Home/>}/>
      </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Below is the Home.js code

import React from 'react'

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  )
}

export default Home

CodePudding user response：

The problem is the dependency modules' compatibility, you can remove the node_modules folder with rm -rf ./node_modules and run npm i or yarn to install the dependencies all again. Hope it helps!