Reactstrap and React-router 4.0.0-beta.6 - active

Question

I'm using Reactstrap and React-router 4.0.0-beta.6 in the educational project that is located on gitlab with custom domain.
According to Reactstrap docs: that's the way I should use active navlink

  import { NavLink } from 'reactstrap'
  ... 
  <NavLink href="#" active = true >Link< /NavLink>

According to React-router v4 docs:

  import { NavLink } from 'react-router-dom'
  ...
  <NavLink to="/about" activeClassName="active">About</NavLink>

So how should I do implement navlink active state and use react-router?

can you update the tag to use reactstrap instead of react-bootstrap — eddywashere, Feb 21 '17 at 17:17
@eddywashere I tried but Creating the new tag 'reactstrap' requires at least 1500 reputation. Try something from the existing tags list instead" — Taras Yaremkiv, Feb 21 '17 at 17:58

score 18 · Accepted Answer · answered Feb 21 '17 at 17:16

To use both, you'll need to rename one of those imports and use the tag prop in reactstrap NavLink. You won't be able to use the active prop on reactstrap NavLink because that logic exists in react router NavLink.

Here's what it should look like:

import { NavLink } from 'reactstrap';
import { NavLink as RRNavLink } from 'react-router-dom';

<NavLink to="/about" activeClassName="active" tag={RRNavLink}>About</NavLink>

More info here: https://github.com/reactstrap/reactstrap/issues/336

It's great, but I have a question: how to change the active style of reactstrap NavbarBrand? In the NavbarBrand there is no property active. ` APP ` — FreeClimb, Nov 14 '17 at 13:34

score 4 · Answer 2 · answered Sep 03 '17 at 09:46

By default active class is used. You can simply use exact boolean property to match the exact path.

import { NavLink } from 'reactstrap';
import { NavLink as RRNavLink } from 'react-router-dom';

<NavLink exact to="/about" tag={RRNavLink}>About</NavLink>

Have a look on the source code of react-router.NavLink component: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js

score 3 · Answer 3 · answered Mar 17 '18 at 20:17

3

Since you are using reactstrap to handle styling for the navbar, you don't, and shouldn't need to rely on NavLink from react-router to do the same thing.

You can use Link from react-router instead, which deals with the routing only, and doesn't add the 'active' className when it is selected. But that's fine, because bootstrap's NavLink will do the styling for you.

 import { NavLink } from 'reactstrap';
 import { Link } from 'react-router-dom';

 <NavLink><Link to="/about">About</Link></NavLink>

answered Mar 17 '18 at 20:17

longcc

33
5

Yep, this is the one – SpectreVert May 25 '20 at 15:18
I believe this gives the error: `Warning: validateDOMNesting(...): cannot appear as a descendant of .` – isgoed Dec 12 '20 at 17:28

tim-montague · Answer 4 · 2017-09-03T12:10:19.290

My advice is to avoid <Link>, <NavLink>, and tag all together when working with React Router v4 and Reactstrap (Bootstrap). I really think all three should be deprecated, especially the tag attribute. Trying to mix-in React Router's <Link> and <NavLink> into Reactstrap components leads to unforeseen style issues with Bootstrap (for example: https://github.com/reactstrap/reactstrap/issues/562).

I've found that from a style standpoint, it's better to use the React Router v4 <Route> component, and pass the history prop to the Reactstrap component.

import { Route } from 'react-router-dom';
import { Button } from 'reactstrap';

<Route
  render={props =>
    <Button role="button"
      onClick={() => props.history.push("/endpoint")}>
    </Button>}
  />

score 1 · Answer 5 · answered May 25 '18 at 18:21

1

I use something like this :

<NavLink to="/about" active={window.location.hash === '/about'}>About</NavLink>

answered May 25 '18 at 18:21

Softmixt

1,658
20
20

score 0 · Answer 6 · answered Jan 12 '19 at 06:57

I had the exact prop in react-router 4.3.1 route but also needed to add exact to reactstrap 7.0.2 NavLink to prevent base route from being shown as active at all other child routes.

import { Link, NavLink as RRNavLink, withRouter } from "react-router-dom";
import { NavItem, NavLink } from "reactstrap";

<NavItem>
  <NavLink to="/" activeClassName="active" exact tag={RRNavLink}>
    Home
  </NavLink>
</NavItem>
<NavItem>
  <NavLink to="/some-route" activeClassName="active" tag={RRNavLink}>
    Some Text
  </NavLink>
</NavItem>

Reactstrap and React-router 4.0.0-beta.6 - active

6 Answers6