React-Router DOM not rendering the content from other pages - reactjs

Question

// App.js
import React from 'react';
import Contact from './Contact';
import About from './About';
import Nav from './Nav';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
function Web() {
return (
<Router>
<Switch>
<Nav />
<Route exact path="/" Component={Home} />
<Route exact path="/contact" Component={Contact} />
</Switch>
</Router>
);
}
const Home = () => (
<div>
<h1>Home page</h1>
</div>
);
export default Web;
// Nav.js
import React from 'react';
import {Link} from 'react-router-dom';
class Nav extends React.Component {
render() {
return (
<nav class="navbar navbar-light bg-light justify-content-between">
<Link to="/contact">
<a class="navbar-brand">Contact</a>
</Link>
<Link to="/about">
<a class="navbar-brand">about</a>
</Link>
</nav>
);
}
}
export default Nav;
//Contact.js
import React from 'react';
class Contact extends React.Component {
render() {
return <h1>CONTACT PAGE</h1>;
}
}
export default Contact;
When I don't use the react-router it works fine and renders the contact page. When it comes to react router This renders only the NavBar page .When I click the Contact link in the Navbar the url changes but it's an empty page.I might have done some mistake but could not find out.

Answer 1

All children of a Switch component should be either Route or Redirect components.
Also, you are never passing the component prop to the route components because you have the prop name(as "Component") uppercased.
function Web() {
return (
<Router>
<Nav /> /* Nav should be outside of the switch */
<Switch>
<Route exact path='/' component={Home} /> /* lowercased prop name */
<Route exact path='/contact' component={Contact} />
</Switch>
</Router>
)
}

Answer 2

Name of props for <Route /> component should be camel cased with starting lower case letter.
You have:
<Route exact path='/' Component={Home} />
Try this:
<Route exact path='/' component={Home} />

Answer 3

Move your Nav component out of switch. i.e
// App.js
import React from 'react';
import Contact from './Contact';
import About from './About';
import Nav from './Nav';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
function Web() {
return (
<Router>
<Nav />
<Switch>
<Route exact path="/" Component={Home} />
<Route exact path="/contact" Component={Contact} />
</Switch>
</Router>
);
}
const Home = () => (
<div>
<h1>Home page</h1>
</div>
);
export default Web;
// Nav.js
import React from 'react';
import {Link} from 'react-router-dom';
class Nav extends React.Component {
render() {
return (
<nav class="navbar navbar-light bg-light justify-content-between">
<Link to="/contact">
<a class="navbar-brand">Contact</a>
</Link>
<Link to="/about">
<a class="navbar-brand">about</a>
</Link>
</nav>
);
}
}
export default Nav;
//Contact.js
import React from 'react';
class Contact extends React.Component {
render() {
return <h1>CONTACT PAGE</h1>;
}
}
export default Contact;