React-Bootstrap link item in a navitem

Question

I'm having some styling issues using react-router and react-bootstrap. below is a snippet of the code

import { Route, RouteHandler, Link } from 'react-router';
import AuthService from '../services/AuthService'
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';

    <Nav pullRight>
      <NavItem eventKey={1}>
        <Link to="home">Home</Link>
      </NavItem>
      <NavItem eventKey={2}>
        <Link to="book">Book Inv</Link>
      </NavItem>
      <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">
        <MenuItem eventKey="3.1">
          <a href="" onClick={this.logout}>Logout</a>
        </MenuItem>          
      </NavDropdown>  
    </Nav>

This is what it looks like when it renders.

I know that the <Link></Link> is causing this but I don't know why? I would like for this to be in-line.

score 254 · Answer 1 · answered Apr 29 '16 at 08:16

254

Using LinkContainer from react-router-bootstrap is the way to go. The following code should work.

import { Route, RouteHandler, Link } from 'react-router';
import AuthService from '../services/AuthService'
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

/// In the render() method
<Nav pullRight>
  <LinkContainer to="/home">
    <NavItem eventKey={1}>Home</NavItem>
  </LinkContainer>
  <LinkContainer to="/book">
    <NavItem eventKey={2}>Book Inv</NavItem>
  </LinkContainer>
  <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">
    <LinkContainer to="/logout">
      <MenuItem eventKey={3.1}>Logout</MenuItem>    
    </LinkContainer>      
  </NavDropdown>  
</Nav>

This is mostly a note to future self, when googling this issue. I hope someone else might benefit from the answer.

answered Apr 29 '16 at 08:16

Gennon

2,669
1
13
12

38

+1: The [official recommendation from react-bootstrap, and react-router](https://github.com/reactjs/react-router/issues/83#issuecomment-214794477), is to use [react-router-bootstrap](https://github.com/react-bootstrap/react-router-bootstrap). – Brett Sun Jun 16 '16 at 09:53
4

how about toggling the activeClassName? – Anyul Rivas Aug 28 '16 at 07:19
If you cannot make this work, just make sure your path is included in React Router. – Anant Simran Singh Sep 23 '16 at 12:32
Jeez, wasted an hour till I've found your answer. Apparently the recommandation to use react-router-bootstrap is not bold enough. – Jjang Oct 19 '16 at 23:00
@KvothetheBloodless I am new to this can you provide an example or explain "make sure your path is included in React Router" a bit more. – Paschalidis Christos Nov 22 '16 at 19:05
@PaschalidisChristos I meant that in my experience, Link Container links only work when you have provided the same link in react-router. https://css-tricks.com/learning-react-router/ – Anant Simran Singh Nov 23 '16 at 09:30
But how to link to external site? Seems react-router-bootstrap LinkContainer doesn't work for external site, only for react-router locations. – Eric Hartford Feb 03 '17 at 03:57
8

This fails to apply the "active" styling to NavItems. – Daniel Arant Feb 08 '17 at 03:26
Isn't it recommended way to do imports directly like `import Nav from 'react-bootstrap/lib/Nav'` rather then destructuring whole library?? – Tomasz Mularczyk Feb 08 '17 at 08:40
I'm still stuck, can you show your Router definition? please :/ – Emixam23 Jan 18 '18 at 01:42
@BrettSun @Gennon, I'm having some trouble to make work this exact same code. I'm getting the error: `TypeError: router.createHref is not a function` inside function `at LinkContainer.render`. Anything that I am missing to do? – manonthemoon Aug 14 '18 at 07:14
@manonthemoon It is hard to know exactly what is wrong, but I would recommend you to see if you are using supported versions for each library. Maybe you are using the older LinkContainer with a new version of react-router? There has been several updates to react-router since I wrote this in 2016. :) – Gennon Aug 15 '18 at 09:12
Does anyone know how to prevent the home link (e.g. to='/') from being constantly highlighted by default? I'm seeing this in the appearance for the mobile "xs" media query size. EDIT - nvm: exact={true} – Dave Cole Sep 11 '18 at 19:24
1

I added an answer below that solves the problem with active/activeKey not working. Works with react-bootstrap v_1.0 beta too! (To use with normal version, just sub out Nav.Item fro NavItem, and so on and so forth) – Young Scooter Nov 14 '18 at 23:07
This answer is out of date. It is no longer the best answer. For react-router-dom v4 or v5, see Alexey's answer. Use `as={NavLink}`. – Geoffrey Hale Jan 11 '21 at 04:06

Alexey · Answer 2 · 2019-12-21T21:09:40.053

73

2020 upd: tested with react-boostrap: 1.0.0-beta.16 and react-router-dom: 5.1.2

2019 upd: for those who are working with react-bootstrap v4 (using 1.0.0-beta.5 currently) and react-router-dom v4 (4.3.1) just use "as" prop from Nav.Link, here is full example:

import { Link, NavLink } from 'react-router-dom'
import { Navbar, Nav } from 'react-bootstrap'

<Navbar>
  {/* "Link" in brand component since just redirect is needed */}
  <Navbar.Brand as={Link} to='/'>Brand link</Navbar.Brand>
  <Nav>
    {/* "NavLink" here since "active" class styling is needed */}
    <Nav.Link as={NavLink} to='/' exact>Home</Nav.Link>
    <Nav.Link as={NavLink} to='/another'>Another</Nav.Link>
    <Nav.Link as={NavLink} to='/onemore'>One More</Nav.Link>
  </Nav>
</Navbar>

Here is working example: https://codesandbox.io/s/3qm35w97kq

edited Dec 21 '19 at 21:09

answered Mar 04 '19 at 07:29

Alexey

1,914
16
13

just tried out, it just doesn't work with 'as={NavLink}'. – lannyboy Mar 06 '19 at 15:14
2

This works on react router v5 with react-bootstrap 1 and react 16.8 – proc Jul 05 '19 at 11:44
I come from Vue.js where boostrap vue simply implements and manages the "to" parameter and I find it much easier. Thanks for the tip anyway, it helped a lot! – Mooncake Jul 08 '19 at 08:04
1

Use this solution instead of `LinkContainer` from `react-router-bootstrap` because this solution supports `activeClassName`. – takasoft Dec 03 '19 at 21:23
Thank you @Alexey. Spent hours trying to get LinkContainer working and then found this answer. – David Easley Dec 22 '19 at 18:49
2

after hours of studying this problem, **this is the best solution**. – Oana Andone Jan 03 '20 at 15:32
@Alexey awesome thanks for the great solution. worked perfectly. – Alex P Jan 06 '20 at 07:45
Thank you.. this worked so good, I tried so many solutions but this one is so clean and best.. – Affy Jan 24 '20 at 04:46
2

This is the correct solution, and should be marked as the answer. – Stephan Bakkelund Valois Jul 22 '20 at 18:06
This is the best updated solution. Thank you! – Geoffrey Hale Jan 11 '21 at 04:02
This is the best option. Avoids installing yet another dependency – David Okwii Mar 12 '21 at 08:32
1

Works well with React Router v6, react-bootstrap 2.1.1 and react 17! – Lukenzo Jan 18 '22 at 17:04

sonlexqt · Answer 3 · 2018-07-15T14:48:28.907

34

Have you tried using react-bootstrap's componentClass ?

import { Link } from 'react-router';
// ...
<Nav pullRight>
  <NavItem componentClass={Link} href="/" to="/">Home</NavItem>
  <NavItem componentClass={Link} href="/book" to="/book">Book Inv</NavItem>
</Nav>

edited Jul 15 '18 at 14:48

answered Mar 06 '18 at 18:16

sonlexqt

6,011
5
42
58

1

This works well! No styling issues and much simpler than the other answers that require overriding, you could also override with a HoC just to avoid the repetition of the href / to. – Tim Lind Mar 07 '18 at 11:07
1

This is so clean, I used it right now with "target blank" for an external link and works very well. Thanks – Saulo Gomes Apr 04 '18 at 17:58
2

This is better,without the need to include another package. – sbk201 Aug 30 '18 at 07:48
2

Just upgraded to 1.0.0-beta.5. It seems they removed support for componentClass :( – Nate-Bit Int Feb 15 '19 at 05:47

score 16 · Answer 4 · answered Apr 03 '19 at 11:09

You can avoid using LinkContainer from react-router-bootstrap. However, componentClass is going to become as in the next release. So, you can use the following snippet for the last version (v1.0.0-beta):

<Nav>
    <Nav.Link as={Link} to="/home" >
        Home
    </Nav.Link>
    <Nav.Link as={Link} to="/book" >
        Book Inv
    </Nav.Link>
    <NavDropdown title="Authorization" id="basic-nav-dropdown">
        <NavDropdown.Item onClick={props.logout}>
            Logout
        </NavDropdown.Item>
    </NavDropdown>
</Nav>

score 7 · Accepted Answer · answered Mar 08 '16 at 09:52

7

You should not put anchor inside NavItem. By doing this you will see warning in the console:

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See Header > NavItem > SafeAnchor > a > ... > Link > a.

That's because when NavItem is rendered an anchor (direct child of the NavItem) is already there.

Because of the warning above, react will be forced to treat the two anchor as sibling, which caused the style issue.

answered Mar 08 '16 at 09:52

Ming

4,110
1
29
33

6

I had to end up using a [linkcontainer](https://www.npmjs.com/package/react-router-bootstrap). – chad schmidt Mar 09 '16 at 13:08
4

Could you please give an example ? – Paschalidis Christos Nov 22 '16 at 18:59
5

Am I the only whose problem gets solved not by an accepted answer but the second answer. – Ejaz Karim Jul 19 '17 at 09:35
2

@chadschmidt please change the accepted answer to https://stackoverflow.com/a/36933127/1826429 – Inderjeet Singh Dec 17 '18 at 19:11

score 5 · Answer 6 · edited Jul 27 '17 at 10:34

Here is a solution for use with react-router 4:

import * as React from 'react';

import { MenuItem as OriginalMenuItem, NavItem as OriginalNavItem } from 'react-bootstrap';

export const MenuItem = ({ href, ...props }, { router }) => (
  <OriginalMenuItem onClick={e => {e.preventDefault();router.transitionTo(href)}} href={href} {...props}/>
);

MenuItem.contextTypes = {
  router: React.PropTypes.any
};

export const NavItem = ({ href, ...props }, { router }) => (
  <OriginalNavItem onClick={e => {e.preventDefault();router.transitionTo(href)}} href={href} {...props}/>
);

NavItem.contextTypes = {
  router: React.PropTypes.any
};

Instead of using `router.transitionTo(href)` use `router.history.push(href)` — Devasatyam, Dec 19 '17 at 13:28

score 3 · Answer 7 · answered Aug 30 '17 at 12:23

3

IndexLinkContainer is a better option than LinkContainer if you want the inside NavItem to highlight which one is active based on the current selection. No manual selection handler is needed

import { IndexLinkContainer } from 'react-router-bootstrap';
....

//Inside render
<Nav bsStyle="tabs" >
  <IndexLinkContainer to={`${this.props.match.url}`}>
    <NavItem >Tab 1</NavItem>
  </IndexLinkContainer>
  <IndexLinkContainer to={`${this.props.match.url}/tab-2`}>
    <NavItem >Tab 2</NavItem>
  </IndexLinkContainer>
  <IndexLinkContainer to={`${this.props.match.url}/tab-3`}>
    <NavItem >Tab 3</NavItem>
  </IndexLinkContainer>
</Nav>

answered Aug 30 '17 at 12:23

Sairam Krish

10,158
3
55
67

I am not using tabs but would like the link in my nav bar to be highlighted as active. I tried using IndexLinkContainer and it does not work as you indicated. If I go directly to a route it will highlight the right one but not if I just click the links. – Thomas Le Nov 27 '17 at 00:29
btw just curios how did you find ```IndexLinkContainer```? couldn't find it anywhere in the docs tho... – Thiem Nguyen Dec 28 '17 at 18:31
@ThomasLe Check your using Component vs PureComponent. I've had a few updated issues fixed by switching to Component – FrozenKiwi Sep 24 '18 at 19:40

score 2 · Answer 8 · answered Apr 05 '17 at 16:51

You can use history, just be sure to create the component with router:

in App.js:

// other imports
import {withRouter} from 'react-router';

const NavigationWithRouter = withRouter(Navigation);

//in render()
    <NavigationWithRouter />

in Navigation.js:

//same code as you used before, just make an onClick event for the NavItems instead of using Link

<Nav pullRight>
  <NavItem eventKey={1} onClick={ e => this.props.history.push("/home") } >
    Home
  </NavItem>
  <NavItem eventKey={2} onClick={ e => this.props.history.push("/book") } >
    Book Inv
  </NavItem>
</Nav>

score 1 · Answer 9 · answered Nov 14 '18 at 23:05

To add functionality with "activeKey" prop in react-bootstrap v_1.0 beta, use this format:

<Nav activeKey={//evenKey you want active}>
    <Nav.Item>
        <LinkContainer to={"/home"} >
            <Nav.Link eventKey={//put key here}>
                {x.title}
            </Nav.Link>
        </LinkContainer>
    </Nav.Item>
    //other tabs go here
</Nav>

score 1 · Answer 10 · answered Nov 20 '21 at 23:52

For the people using Gatsby. If you are using a NavBar and a NavDropdown and you want to use a Link inside a NavDropdown.Item you will get an error that:

<a> cannot be descendant of <a>

For fixing this error try using as="li" :

 <NavDropdown title="Services" id="basic-nav-dropdown">
    <NavDropdown.Item as="li">
      <Link to="/Services" className="nav-link">
        Services
      </Link>
    </NavDropdown.Item>
  </NavDropDown>

React-Bootstrap link item in a navitem

10 Answers10

Linked