有条件地设置活动类反应路由器当前的路线

Question

我用的路由器反应1.0.2和我的路线是这样的：

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

我的应用组件是这样的，我想我可以通过位置在道具：

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

我希望有条件地设置活动类的菜单组件上：

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

但是在调用菜单的渲染函数时this.props.location为空？

如何将道具传递给子组件？

Answer 1

它看起来并不像是将道具传递给正确的元素。 App的children将是任何儿童路线正在呈现（所以要么Home或Triangles），但你想要道具被传递到Menu。

为了做到这一点，只是通过它通过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

只需设置activeClassName或activeStyle属性您的链接组件。这是内置到React路由器中的，更多详细信息请参见official docs。