私はこれを使用して、アクティブなルートを取得しています私のアプリケーションをreactjs.In使用してプロジェクトを作成していReactJs

Question

で反応し、ルータとのアクティブなルートを取得します。

this.context.router.isActive 

が、未定義の取得、私はreact-を使用していますルータ4.これまでの私は、リアルータの下位バージョンを使用しているときに私のために働いていました。

class NavLink extends React.Component { 

    render() { 


    console.log(this.context.router.isActive) 
      let isActive = this.context.router.isActive(this.props.to, true); 
      let className = isActive ? "active" : ""; 
     return(
      <li className={className} {...this.props}> 
       <Link {...this.props}/> 
      </li > 
     ); 
    } 
} 

NavLink.contextTypes = { 
    router: PropTypes.object 
}; 

Answer 1

アーキテクチャがで変化していない反応し、ルータV4をしてthis.context.router.isActiveは、もはやサポートされています： はここに私のコードです。

react-router-v4では、公開されているNavLinkコンポーネントを使用してNavLinkを作成する代わりに使用できます。

From the documentation:

NavLink

スタイリングは、それが現在のURLと一致したときにレンダリングされた要素を するために属性を追加することの特別版。

activeClassName：文字列

それがアクティブなときに要素を与えるために、クラスそれはまた、あなたのactiveClassNameの小道具を提供

import { NavLink } from 'react-router-dom' 

<NavLink to="/about">About</NavLink> 

。与えられたデフォルトの クラスがアクティブです。これはclassName propと結合されます。

<NavLink 
    to="/faq" 
    activeClassName="selected" 
>FAQs</NavLink> 

はなぜthis.context.router.isActiveサポートされていません。ここで

は「<Route>は必ずしも意味しないレンダリングgithub問題

からの抜粋であるのみ現在の場所と一致するとレンダリングされます "。たとえば、コンテキストからのルータ変数をコンポーネントに小道具として注入するのに使用できます。

<NavLink>では、<Route>はchildren propを使用しています。つまり、ルートが一致するかどうかに関係なく、children関数が呼び出されます。一致がnullの場合、一致しなかったことがわかります。

このように<Route children>を使用しないことを希望する場合、リアクタールーターは、matchPath機能を使用して絶対的なアプローチを提供します。これは、<Switch>esと<Route>sが内部的に場所をパスに照合するために使用するものです。

コンポーネントがRouter小道具を受信して​​いない場合は、withRouter HOC

import { withRouter } from 'react-router'; 

export class withRouter(MyComponent); 

を使用して、それを注入でき