condizionale set classe attiva sul menu utilizzando reagire router percorso corrente

Question

Sto usando reagire router 1.0.2 e le mie vie di simile a questa:

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

componente

My App assomiglia a questo e ho pensato che avrei potuto passare il percorso negli oggetti di scena:

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

voglio impostare condizionalmente una classe attiva sul componente 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> 
     ); 
     } 
    }; 

Ma lo this.props.location è nullo quando viene richiamata la funzione di rendering del menu?

Come posso passare oggetti di scena ai componenti del bambino?

Answer 1

Non sembra che tu stia passando l'elica nell'elemento corretto. Lo children di App dovrebbe essere qualunque sia la route figlio che viene sottoposta a rendering (ovvero Home o Triangles), ma si desidera che il puntello venga passato a Menu.

Per farlo, basta passare 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

Basta impostare l'attributo activeClassName o activeStyle al componente di collegamento. Questo è integrato in React Router, vedere lo official docs per ulteriori dettagli.