Conditionally set active class on menu using react router current route

Question

I am using react router 1.0.2 and my routes look like this:

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={Home}/>
        <Route path="triangles" component={Triangles}/>
      </Route>
    </Router>
  </Provider>,
  document.querySelector('.container')
);

My App component looks like this and I thought I could pass the location in the props:

import React, {Component} from 'react';

import Menu from './menu';

export default class App extends Component {
  render() {
    return (
      <div>
        <Menu/>
        <div className="jumbotron">
         {this.props.children && React.cloneElement(this.props.children, {
            location: this.props.location
          })}
        </div>
      </div>
    );
  }
};

I want to conditionally set an active class on the Menu component:

import React, {Component} from 'react';

import { pushPath } from 'redux-simple-router';
import { Link } from 'react-router';

    export default class Menu extends Component {
      render() {
        return (
            <nav role="navigation" className="navbar navbar-default">
              <div id="navbarCollapse" className="collapse navbar-collapse">
                <ul className="nav navbar-nav">
                  <li className={this.props.location.pathname === '/' ? 'active' : ''}>
                    <Link to="/">Home</Link>
                  </li>
                </ul>
              </div>
            </nav>
        );
      }
    };

But the this.props.location is null when the menu's render function is called?

How can I pass props to child components?

I remember using props.params for this. I m not entirely sure. — Bhargav Ponnapalli, Dec 22 '15 at 07:17

score 11 · Answer 1 · answered Feb 21 '19 at 14:07

11

To set class on the active navigation element

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

&

<NavLink to="/Home" activeClassName="active">Home</NavLink>

answered Feb 21 '19 at 14:07

Prasanna Jathan

570
7
12

score 4 · Accepted Answer · answered Dec 22 '15 at 08:09

It doesn't look like you're passing the prop into the correct element. The children of App would be whatever child route is being rendered (so either Home or Triangles), but you want the prop to be passed to Menu.

To do that, just pass it in via JSX:

import React, {Component} from 'react';

import Menu from './menu';

export default class App extends Component {
  render() {
    return (
      <div>
        <Menu location={this.props.location} />
        <div className="jumbotron">
          {this.props.children}
        </div>
      </div>
    );
  }
};

Thomas Kuntz · Answer 3 · 2018-04-12T11:01:13.810

4

You'll want to use React Router's <NavLink> component that allow you to define styles or add a class when the link is active. Just set the activeClassName or activeStyle attribute to your <NavLink> component.

This is built into React Router, see the official docs for more details: https://reacttraining.com/react-router/web/api/NavLink

edited Apr 12 '18 at 11:01

answered Jan 14 '18 at 12:55

Thomas Kuntz

73
2
7

2

I believe the React component you need to use is . This is the one with extended functionality. This should be the right answer for 2017 and after. – Miro J. Mar 20 '18 at 21:04

score 1 · Answer 4 · answered Nov 17 '20 at 10:18

For me what worked has is using NavLink as it has this active class property.

First import it

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

Use an activeClassName to get the active class property.

<NavLink to="/" activeClassName="active">
     Home
</NavLink>

<NavLink to="/store" activeClassName="active">
     Store
</NavLink>

<NavLink to="/about" activeClassName="active">
     About Us
</NavLink>

Style your class in the css by the property active.
```
.active{
    color:#fcfcfc;
 }
```

Conditionally set active class on menu using react router current route

4 Answers4

Linked