反应路由器isActive方法不起作用

Question

我使用es6,twitter bootstrap和react-router 1.0.0-rc3。我想创建一个导航栏并添加到li元素类active。

我试图用isActive方法history对象。

var RouterPropTypes = require('react-router').PropTypes; 

LinkWrapper组件

export class LinkWrapper extends React.Component{ 

    constructor(props, context) { 
     super(props, context); 
    } 

    render() { 
    console.log(this.props.to); 
    console.log(this.props.query); 
    let isActive = this.context.history.isActive(this.props.to, this.props.query); 
    let className = isActive ? 'active' : ''; 
    return (<li className={className}> 
       <CustomersIcon /> 
       <Link {...this.props}/> 
      </li>); 
    } 
} 

LinkWrapper.contextTypes = { 
    history: RouterPropTypes.history 
}; 

的NavBar组件

export class NavBar extends React.Component { 

    constructor(props, context) { 
     super(props, context); 
    } 

    componentDidUpdate() { 
     console.log('NavBar - componentDidUpdate'); 
    } 

    render() { 
    return (
     <nav className="navbar navbar-default"> 
      <div className="collapse navbar-collapse" id="main-navbar-collapse"> 
       <ul className="nav navbar-nav"> 
        <LinkWrapper href="customers" /> 
       </ul> 
      </div> 
     </nav> 
    );  
    } 
} 

NavBar.contextTypes = { 
    history: RouterPropTypes.history 
} 

在线this.context.history.isActive我得到错误：

Uncaught TypeError: Cannot read property 'match' of undefined 

因为this.props.to和this.props.query是'undefined'。

我也尝试在ES5中使用History Mixin创建LinkWrapper组件，但是this.props.to和this.props.query仍然是'undefined'。

var Router = require('react-router'); 
var { Route, DefaultRoute, RouteHandler, Link, History } = Router; 

const Tab = React.createClass({ 
    mixins: [ History ], 
    render() { 
    console.log(this.props.to); 
    console.log(this.props.query); 
    let isActive = this.history.isActive(this.props.to, this.props.query); 
    let className = isActive ? 'active' : ''; 
    return (<li className={className}> 
       <CustomersIcon /> 
       <Link {...this.props}/> 
      </li>); 
    } 
}); 

Answer 1

使用当前的类名

<Link ... activeClassName="active" /> 

，如果你想使用this.props.history，那么你必须设置历史

// create browser history for navigating 
import createBrowserHistory from 'history/lib/createBrowserHistory'; 
let history = createBrowserHistory(); 

再加入历史道具路由器

<Router history={history}> 
    <Route component={App} path="/"> 
     <Route component={indexView} path="/index" /> 
    </Route> 
</Router> 

然后我n一个像indexView的组件，你可以做到这一点

this.props.history.isActive('/someroute')