前回の続き。

Lesson3 - Navigating With Link

今回は、ハイパーリンクをつけて/reposと/aboutに画面遷移できるようにします。

ハイパーリンクをつける

ハイパーリングは、React Routerが提供するLinkコンポーネントを使います。 app/components/app.jsxを、以下のように修正します。

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">About</Link></li>
          <li><Link to="/repos">Repos</Link></li>
        </ul>
      </div>
    );
  }
  
}

export default App;

これで、/aboutと/reposに遷移できるはずです。