The new 'Routes' syntax in React-router-dom on my code doesn't work

Question

I learnt that after the newly released react packages, the tag in react-router-dom do not work again so I changed to "Routes" after a couple of research online but still, it isn't working. Please help me review it. Below is a screenshot of my pc.

My PC

Also this is the code

 import React from 'react'; import Navbar from './components/Navbar' import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'; import './App.css'; import Home from './components/pages/Home'; import Services from './components/pages/Services'; import Products from './components/pages/Products'; import SignUp from './components/pages/SignUp'; function App(){ return ( <> <Router> <Navbar /> <Routes> <Route exact path="/" component={Home} /> <Route path="/services" component={Services} /> <Route path="/products" component={Products} /> <Route path="/sign-up" component={SignUp} /> </Routes> </Router> </> ); } export default App; //<HeroSection /> //import HeroSection from './components/HeroSection';

Answer 1

change the Route component to

<Route path="/" element={Home} />

Instead of naming it as components inside the Route you have to use as element.