web-dev-qa-db-ja.com

ReactJのreact-routerでアクティブなルートを取得する

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

this.context.router.isActive

しかし、未定義になると、react-router 4を使用しています。以前は、react-routerの下位バージョンを使用しているときにこれが機能しました。これが私のコードです：

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
};
javascriptreactjsreact-routerreact-router-v4
11
Karan

アーキテクチャはreact-router v4で変更され、this.context.router.isActiveはサポートされなくなりました。

React-router-v4では、NavLinkを自分で作成する代わりに、公開されたNavLinkコンポーネントを使用できます。

ドキュメントから：

NavLink

現在のURLと一致する場合、レンダリングされた要素にスタイル属性を追加するの特別なバージョン。

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

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

また、activeClassNameプロップも提供します。

activeClassName：string

要素がアクティブなときに要素を提供するクラス。指定されたデフォルトのクラスはアクティブです。これはclassNameプロップで結合されます。

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

this.context.router.isActiveがサポートされない理由：

これはgithubの問題からの抜粋です

<Route>のレンダリングは、必ずしも「現在の場所と一致する場合にのみレンダリングする」ことを意味するわけではありません。たとえば、ルーター変数をコンテキストからコンポーネントに小道具として注入するために使用できます。

<NavLink>では、<Route>は子プロップを使用しています。つまり、ルートが一致するかどうかにかかわらず、子関数を呼び出します。一致がnullの場合、一致しなかったことがわかります。

このように<Route children>を使用したくない場合は、ReactルーターがmatchPath関数を使用して命令型アプローチを提供します。これが<Switch>esおよび<Route>s内部で使用して、場所をパスと照合します。

コンポーネントがRouterプロパティを受け取っていない場合は、withRouter HOCを使用してコンポーネントを注入できます

import { withRouter } from 'react-router';

export class withRouter(MyComponent);
16
Shubham Khatri