Page reloads while navigating in reactJS


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">
    <MDBNavbarLink active href="/#" className="pe-5">
    <MDBNavbarLink active href="#" className="pe-3">
       Contact Us

And my router is

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

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:
It should look like this:

<Link to={`/features`}>Features</Link>

Leave a ReplyCancel reply