React Routerのチュートリアル Lesson5

前回の続き。

hinathy.hatenablog.com

Lesson5 - Active Links

今回は、アクティブなリンクにスタイルを適用して、アクティブなリンクをわかりやすく表示してみます。

Linkにスタイルを適用する

ハイパーリンクにスタイルを与えるには、LinkコンポーネントのactiveStyleというPropを設定してあげます。

import React from 'react';
import { Link } from 'react-router';

class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><Link to="/about" activeStyle={{ color: 'red' }}>About</Link></li>
          <li><Link to="/repos" activeStyle={{ color: 'red' }}>Repos</Link></li>
        </ul>
        { this.props.children }
      </div>
    );
  }
  
}

export default App;

これで、アクティブなリンクが赤色で表示されます。

別の手段でスタイルを適用する

上記とは別に、activeClassNameというPropsを使う方法もあります。 この方法は、Linkにclassを設定して、スタイルは別途スタイルシートで定義する方法です。

まずは、activeStyleをactiveClassNameに置き換えます。与えるclass名はactiveにします。

import React from 'react';
import { Link } from 'react-router';

class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><Link to="/about" activeClassName="active">About</Link></li>
          <li><Link to="/repos" activeClassName="active">Repos</Link></li>
        </ul>
        { this.props.children }
      </div>
    );
  }
  
}

export default App;

次に、スタイルシートapp/index.cssを作成し、スタイルを定義します。

.active {
  color: green;
}

最後に、app/index.cssをapp/index.jsxで読み込みます。

... (snip) ...

require('./index.css');

... (snip) ...

今度は、アクティブなリンクが緑色で表示されるようになります。

Linkコンポーネントのラッパーを作る

LinkにいちいちactiveClassNameを渡すのはDRYじゃないですので、LinkのラッパーコンポーネントNavLinkを作ります。

import React from 'react';
import { Link } from 'react-router';

class NavLink extends React.Component {

  render() {
    return (<Link {...this.props} activeClassName="active" />);
  }

}

export default NavLink;

NavLinkでLinkを置き換えます。

import React from 'react';
import NavLink from './nav_link'

class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><NavLink to="/about">About</NavLink></li>
          <li><NavLink to="/repos">Repos</NavLink></li>
        </ul>
        { this.props.children }
      </div>
    );
  }
  
}

export default App;

まとめ

• アクティブなリンクにスタイルを適用するには、LinkコンポーネントのactiveStyleまたはactiveClassNameを使う。
• activeStyleでは、スタイルを直接設定する。
• activeClassNameではclass名を設定し、スタイルは別途スタイルシートで設定する。
• Linkコンポーネントは、自身がアクティブか否かを知っているので、ラッパーを作ればactiveClassNameの指定をいちいちしなくて良い。

ソースコード

github.com

上記のリリースではNavLinkを入れ忘れたので、下記で対応。

github.com