I have simplified my problem. When I try to navigate through the nav-bar, url changes but the component remains the same. I am new to React, and have trouble with routing. I used the latest version of "react-router-dom" where Switch was not working, so I went back to the version 5.2.0. I could use Switch there but the problem remained. I have tried a lot but all in vain. If there is an efficient and easy way of routing this, please help me with that. Thanks

App.js

import './App.css';
import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

function App() {
    return (
        <Router>

            <nav>
                <Link to="/">Home</Link> <br />
                <Link to="/about">About</Link>
            </nav>

            <Switch>
                <Route exact path="/" render={() => {
                    return (<> This is home page </>)
                }}>
                </Route>
                <Route exact path="/about" render={() => {
                    return (<> This is about </>)
                }}>
                </Route>
            </Switch>

        </Router>
    );
}
export default App;