Bedingtes gesetzt aktive Klasse auf Menü reagieren mit Router aktuelle Route

Question

reagiere ich bin mit Router 1.0.2 und meine Routen wie folgt aussehen:

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

Meine App-Komponente wie folgt aussieht, und ich dachte, dass ich den Ort passieren konnte in den Requisiten:

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

ich möchte gesetzt bedingt eine aktive Klasse auf der Menu-Komponente:

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

Aber die this.props.location ist null, wenn die Renderfunktion des Menüs aufgerufen wird?

Wie kann ich Requisiten an untergeordnete Komponenten übergeben?

Answer 1

Es sieht nicht so aus, als würden Sie die Requisite in das richtige Element überführen. Die childrenApp wäre was auch immer Kind Route gerendert wird (so entweder Home oder Triangles), aber Sie möchten, dass die Prop zu Menu übergeben werden.

, das zu tun, geben sie nur über JSX in:

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

Einfach den activeClassName oder activeStyle Attribut zu Ihrem Link-Komponente. Dies ist in React Router integriert, siehe official docs für weitere Details.