De manière conditionnelle classe active sur le menu à l'aide de réagir routeur itinéraire actuel

Je suis à l'aide de réagir routeur 1.0.2 et mes itinéraires ressembler à ceci:

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

Mon Application composant ressemble à ça et j'ai pensé que je pourrais passer dans les accessoires:

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

Je veux de manière conditionnelle d'une classe active sur le composant Menu:

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

Mais la this.props.location est nulle lorsque le menu render fonction est appelée?

Comment puis-je passer d'accessoires pour enfant composants?

  • Je me souviens à l'aide d'accessoires.paramètres de ce. Je ne suis pas tout à fait sûr.
InformationsquelleAutor dagda1 | 2015-12-22