如何确定当前路由在React中是否处于活动状态

时间:2016-03-13 19:23:20

标签: javascript node.js reactjs react-router

反应v0.14.7 / react-router:v2.0.1

我的路线设置如下:

import { Router, Route, IndexRoute, hashHistory } from "react-router"

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Index}/>
      <Route path="/locations" component={Locations}/>
      <Route path="/products" component={Products}/>
    </Route>
  </Router>, 
  document.getElementById('app'));

我正在尝试在我的一个React类中编写一个方法(使用以下API创建)

export default class MyClass extends React.Component {...}

...确定当前URL的路径是否是特定路径的路径。

例如。假设当前网址为http://domain/products,则调用:

isActive('/products')

会返回TRUE

我知道React Router的Link对象activeClassName。但我需要在与我定义<link/>对象的位置不同的位置以编程方式编写一些内容。

查看node_modules/react-router/我可以看到modules/isActive.js符合我的要求,但export中没有modules/index.js,所以我假设我无法访问它?

我也看到了from the API docs that there is an RouterContext isActive method,但是我又不知道怎么称呼这个?

1 个答案:

答案 0 :(得分:1)

好的,谢谢Mike'Pomax'Kamermans,我解决了这个问题:

更改了创建类API:

export default class MyClass extends React.Component {

    ...  

}

为:

export default React.createClass({
    ...
})

并在课程中添加了以下contextTypes定义:

export default React.createClass({

  contextTypes: {
    router: React.PropTypes.object
  },

  render(){

    console.log(this.context.router.isActive('/foo')); // Now works :)

    ...
  }

})