Page reloads while navigating in reactJS

May 16, 2023

I’m trying to create a React web app, I have a navbar.
It was working fine actually. But it reloads every time when navigating.
I dont want the page reloads when we navigate with the navbar.

This is my navbar.

 <MDBNavbarNav fullWidth={false} className="mb-2 mb-lg-0">
    <MDBNavbarLink active aria-current="page" href="/" className="pe-5">
       Home
    </MDBNavbarLink>
    <MDBNavbarLink active href="/#" className="pe-5">
       Features
    </MDBNavbarLink>
    <MDBNavbarLink active href="#" className="pe-3">
       Contact Us
    </MDBNavbarLink>
 </MDBNavbarNav>

And my router is

<div className="App">
  <Router>
     <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/features" element={<Features />}></Route>
        <Route path="*" element={<PageNotFound />}></Route>
     </Routes>
  </Router>
</div>

What I have to do here?

>Solution :

You are using some links that are usually used for external navigation I guess.
For internal navigation, you should use the Link component, from react-router:
https://reactrouter.com/en/main/components/link
It should look like this: