React router changes the url but not refreshing the page. Also if I manually type url and hit ENTER then the routes works properly but on clicking the navlink it won't work.

App.js

import './App.css';
import NavLinks from './compnents/Navbar/NavLinks'
import Home from './compnents/Home/Home';
import About from './compnents/About/About';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";


function App() {
  return (
    <>
      <Router>
        <Switch>
          <Route exact path="/" render={() => {
            return (
              <>
                <NavLinks />
                <Home />
              </>
            )
          }}>
          </Route>
          <Route exact path="/about" render={() => {
            return (
              <>
              <h1>Hello from</h1>
                <NavLinks />
                <About />
              </>
            )
          }}>
          </Route>
        </Switch>
      </Router>
    </>
  );
}

export default App;

File for navlink in which Link is added on which it sets the url NavLinks.js

import { useState } from "react";
import { Link } from 'react-router-dom';
import Logo from "./Logo";
import Container from "../GlobalComponents/Container";


const NavLinks = (props) => {
  const [hidden, setHidden] = useState(true);

  return (
    <nav>
      <Container>
        <Logo />
        <i
          onClick={() => setHidden(!hidden)}
          className={hidden ? "fas fa-bars fa-lg" : "fas fa-times fa-lg"}
          id="burgerMenu"
        ></i>
        <Link to='/'>Home</Link>
        <Link to='/about'>About</Link>
      </Container>
    </nav>
  );
};


export default NavLinks;

On click in NavLink it changes url but not loading the view. Kindly help me. I've also tried with other answers but nothing works.