CODEWITHSUNDEEP
reactjsreact-routerreact-bootstrap
user12123586
user12123586

Reputation:

react-bootstrap nav.link routing

I am working on a project. I have navbar and nav.links on it. such as home, price and features.

I would like to page routing when I click it. Here is my codes about it. I did it usual routing style but it doesn't work.

<LinkContainer>
     <Nav.Link to="/price" >Price</Nav.Link>
</LinkContainer>

and my routing definations in app.js;

<Route path ="/price" exact component={Price}></Route>

I create and import price.js and also import them.

I can succesfully use routing on my buttons but nav.links doesn't work. Any idea?

*Btw it was orginally like this <Nav.Link href="#price" >Price</Nav.Link> Actually idk what is href for?So, I erased it and add "to"

Upvotes: 2

Views: 6577

Answers (5)

joedotnot
joedotnot

Reputation: 5153

The issue is for react-bootstrap (based on BS-v3) this used to work:

<Nav>
  <LinkContainer to="/routeA"><NavItem>My RouteA</NavItem></LinkContainer>
  <LinkContainer to="/routeB"><NavItem>My RouteB</NavItem></LinkContainer>
</Nav>

But for react-bootstrap (based on BS-v4), the devs changed it to

<Nav>
  <LinkContainer to="/routeA"><Nav.Link>My RouteA</Nav.Link></LinkContainer>
  <LinkContainer to="/routeB"><Nav.Link>My RouteB</Nav.Link></LinkContainer>
</Nav>

*Note LinkContainer comes from react-router-bootstrap

[I could not find the official doco for this, and I don't know how to do a pull-request, I need Github for dummies]

Upvotes: 0

Siful I
Siful I

Reputation: 1932

This code works for me:

<Nav.Link as={Link} to="/home" >Home</Nav.Link>

Upvotes: 12

tareq aziz
tareq aziz

Reputation: 777

Try to user react-router-dom instead of react-router

import { BrowserRouter, Route} from "react-router-dom";

Prepare your render like follows, make sure your nav and route both under <BrowserRouter>...</BrowserRouter>

render() {
    return (
        <BrowserRouter>
            <LinkContainer>
                 <Nav.Link to="/price" >Price</Nav.Link>
            </LinkContainer>
            <Route path ="/price" exact component={Price}></Route>
        <BrowserRouter>
    )
}

Update

You may use also Link instead of Nav.Link like this

<Link to="/price">Price</Link>

And you just need to import it from react-router-dom

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

Upvotes: 0

user12123586
user12123586

Reputation:

I found my mistake it should be;

<LinkContainer to="/price">
     <Nav.Link >Price</Nav.Link>
</LinkContainer>

I leave this question here for if someone has any problem like this.

Actually I need to learn what is href for?

Upvotes: 1

akhtarvahid
akhtarvahid

Reputation: 9779

In react-bootstrap you need to define like this

<LinkContainer>
     <Nav.Link href="/price" >Price</Nav.Link>
</LinkContainer>

instead of

 <LinkContainer>
     <Nav.Link to="/price" >Price</Nav.Link>
</LinkContainer>

And using react-router-dom

<Link to="/price" >Price</Link>

or

<NavLink to="/price" >Price</NavLink>

Upvotes: 0

Related Questions