javascript - React-router isActive 方法不起作用

Question

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

我尝试使用 history 的 isActive 方法目的。

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

导航栏组件

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'。

我还尝试使用 History Mixin 在 es5 中创建 LinkWrapper 组件，但是 this.props.to 和 this.props.query 仍然是“未定义的”。

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，那么你必须设置history

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

然后将 history 属性添加到路由器

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

然后在像 indexView 这样的组件中你可以这样做

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