CODEWITHSUNDEEP
reactjsreact-bootstrap
geektanvir
geektanvir

Reputation: 85

Nav.Link to="/About" is not working in react-bootstrap? Nav.Link href="/About is working reloading the whole page

My desired outcome is to have navigation without relodaing the whole page.

<Nav.Link  to="/About">About</Nav.Link> is not working.
<Nav.Link  href="/About">About</Nav.Link> is working but reloading the whole page.

Nav.Link is imported from react-bootstrap.

What is the problem here, and How can I Route to another page without reloding the whole page by react-bootstrap?

Upvotes: 2

Views: 4668

Answers (1)

Quentin Grisel
Quentin Grisel

Reputation: 4987

You didn't close the double quote on your first Link. Try this:

<Nav.Link to="/About">About</Nav.Link>

Also, you need a router for this to work. Something like: 

<Router>
  <Switch>
    <Route path='/about'>
      <About />
    </Route>
    <Route path='/users'>
      <Users />
    </Route>
    <Route path='/'>
      <Home />
    </Route>
  </Switch>
</Router>

Upvotes: 1

Related Questions