React NavLink does not render the components - reactjs

Question

I am working on a retirement calculator. It has a navigation component with links, I set a router with paths in App.js. But the navlinks do not work. I am not sure what is wrong with the code. Please help I am new to reactjs
App.js
import logo from './logo.svg';
import './App.css';
import InputForm from './InputForm';
import Navigation from './Navigation';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import DisplayTable from './DisplayTable';
import RetirementComaparisionForm from './RetirementComparisionForm';
function App() {
return (
<BrowserRouter>
<div className="App">
<Navigation />
<Switch>
<Route exact path = "/" component = {InputForm}></Route>
<Route exact path = "/retirementcomaparisionform" component = {RetirementComaparisionForm}></Route>
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
Navigation.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import DisplayTable from './DisplayTable';
import {NavLink} from 'react-router-dom';
import {Navbar, Nav} from 'react-bootstrap';
class Navigation extends React.Component{
render(){
return(
<Navbar bg="dark" expand="lg" variant = "dark">
<Navbar.Brand>Retirement Calculator</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link to = "/">Home</Nav.Link>
<Nav.Link to = "/retirementcomaparisionform">Compare</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
}
export default Navigation;

Answer 1

Here is the working Example: StackBlitz
import React from "react";
import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";
import DisplayTable from "./DisplayTable";
import { NavLink, Link } from "react-router-dom";
import { Navbar, Nav } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<div className="App">
<Navigation />
<Switch>
<Route exact path="/" component={InputForm} />
<Route
path="/retirementcomaparisionform"
component={RetirementComaparisionForm}
/>
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
class Navigation extends React.Component {
render() {
return (
<Navbar bg="dark" expand="lg" variant="dark">
<Navbar.Brand>Retirement Calculator</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/retirementcomaparisionform">Compare</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
//dummy InputForm and RetirementComaparisionForm components
const InputForm = () => {
return <h1>Input Form</h1>;
};
const RetirementComaparisionForm = () => {
return <h1>Retirement Comaparision Form</h1>;
};