It works fine but I need to refresh whole page while switching from home to about and vice-versa. Please, am working on v5.3.0 react-router-dom

Question

In app.js:

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

return(
    <>
      <Router>
        <Navbar title='Utpal-Utils' Contact='Contact us' mode={mode} toggleMode={toggleMode} />
        <Alert alert={alert} />
        <div className="container my-3">
          <Switch>
            <Route exact path="/about">
              <About mode={mode} />
            </Route>
              <Route exact path="/">
                <TextForm showAlert={showAlert} heading="Enter the text below: " mode={mode} />
              </Route>
          </Switch>
            <hr />
        </div>
      </Router>
    </>
  );

in navBar:

<Link className="nav-link" aria-current="page" to="/">Home</Link>
<Link className="nav-link" to="/about">About</Link>

Answer 1

I think there will have two ways to handle this:

Using a instead Link

<a href="/about">About</a>

Handle onClick with window.location object to redirect page

<span onClick={() => window.location.href="/about"}>About</span>