Conditionally set active class on menu using react

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?

Answer 1

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>
    );
  }
};

Answer 2

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

Answer 3

To set class on the active navigation element

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

&

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