React navigation to pages issues - reactjs

Question

I am trying to navigate to a login page using react router but when the button is clicked, the next page is displayed on the same page without actually navigating to the next page.
Here is my code
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import $ from 'jquery';
import { Login } from './Login';
export class Index extends Component {
render() {
return (
<div>
<div align='center'>
<h3> Project Management System </h3>
</div>
<p>
Here, you can search for the previous B.sc, M.sc and Ph.D projects that have been carried out in the department. <br/><br/>
</p>
<Router>
<div>
<Link to="/login">Continue </Link>
<Route exact path={"/login"} component={Login}/>
</div>
</Router>
</div>
);
}
}
When I click on continue button, it's supposed to show the login page alone, without showing the previous page, but here, it shows both previous page and the login page.

Answer 1

--Edit--
Move your button and info in another Component, call it Home or something similar.
Home.js
import React from "react"
import { Link } from "react-router-dom"
const Home = () => {
return(
<div>
<div style={{textAlign: "center"}}>
<p>Your paragraph</p>
<Link to="/login">Continue </Link>
</div>
</div>
)
}
export default Home
Index.js
now you'll have a cleaner Router
keep all your imports and bring in the Home component
export class Index extends Component {
render() {
return (
<div>
<Router>
<div>
<Switch>
<Route path="/" exact={true} component={Home}>
<Route path="/login" component={Login}/>
</Switch>
</div>
</Router>
</div>

Answer 2

The reason for that behavior is very simple. You wrapped only Login component with the router. You have to create routes with the Switch component to change the views. Here is an example https://codesandbox.io/s/2xqxqpo550