Route method from react-router-dom is not working - reactjs

Question

I have been trying to find a solution for this.
Navbar, Home, Services, Contactus are different components that render fine when I don't user the Route method. They also render fine within the BrowserRouter tags. But when I try to place them within the Route tags, the whole screen goes blank
import Contactus from './Contactus';
import Navbar from './Navbar';
import Home from './Home';
import Services from './Services';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import React, { Component } from 'react';
function App() {
return (
<div className="App">
<h1>This is React Router</h1>
<Router>
<Navbar/>
<Route path="/home" Component={Home} exact />
<Route path="/services" Component={Services} exact />
<Route path="/contactus" Component={Contactus} exact />
</Router>
</div>
);
}
export default App;
What am I doing wrong?

Answer 1

I have managed to fix this. The library installed was react-router-dom v6 but the coding was done for earlier versions. Below are the changes I made and its now working.
Fixes -
All the <Route> lines need to be enclosed within a <Routes> block
For some reason, component is not being accepted as a parameter in the new version so essentially component={Home} is now replaced by element={<Home/>}
And of course, we now need to import Routes also from react-router-dom
import logo from './logo.svg';
import './App.css';
import Contactus from './Contactus';
import Navbar from './Navbar';
import Home from './Home';
import Services from './Services';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import React from 'react';
function App() {
return (
<div className="App">
<h1>This is React Router</h1>
<Router>
<Navbar/>
<Routes>
<Route path="/home" element={<Home/>} exact />
<Route path="/services" element={<Services/>} />
<Route path="/contactus" element={<Contactus/>} />
</Routes>
</Router>
</div>
);
}
export default App;