Question 169637 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Can page reloads be prevented 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">
       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?

Tags:

2

Answers


  1. 0

    You should use

    import Link from 'react-router-dom'

    use Link instead of ‘href’. check React-router-domv6 Link

    Login or Signup to reply.
  2. 0

    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:

    <Link to={`/features`}>Features</Link>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search