反應路由器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')