6.ページ遷移編

ゴール

• react-router (opens new window)を使ってこれまで作った3つのページを遷移できるようにする

完成形

やること

• 各ページにURLを割り当てる
• リンクを置いて行き来できるようにする

事前準備

• routingのライブラリを追加する

npm i react-router-dom

各ページにURLを割り当てる

routingに関する設定ファイルを作成する

• コンポーネントとURLのマッピングを記載するファイルを追加する
  • まずはHelloだけ
• src配下にrouter.jsを作成する

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Hello from './components/Hello';

function Router() {
  return (
    <BrowserRouter>
      <div>
        <Route path="/" exact>
          <Hello />
        </Route>
      </div>
    </BrowserRouter>
  );
}

export default Router;

• Routeタグのpath属性にURLを記載し、子要素としてそのURLにアクセスした際に表示するコンポーネントを記載する

TIP

• react-routerというライブラリのBrowserRouterやRouteを使っている
• ライブラリのルールに則った書き方をすることで簡単にルーティングを実装できる

• 作成したRoutingを使うようにApp.jsを修正

import React from 'react';
import Router from './router'; // importを追加

function App() {
  return <Router />; // Routerを使うように変更
}

export default App;

• 現状ではうまくいっていれば/(ここではhttp://localhost:3000/ (opens new window))にアクセスするとHelloWorldが表示される

各コンポーネントとURLのマッピングを追加

• src/router.jsに/hello,/counter,/todo-listのルーティングも追加する

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Hello from './components/Hello';
import Counter from './components/Counter';
import TodoList from './components/TodoList';

function Router() {
  return (
    <BrowserRouter>
      <div>
        <Route path="/" exact>
          <Hello />
        </Route>
        <Route path="/hello" exact>
          <Hello />
        </Route>
        <Route path="/counter" exact>
          <Counter />
        </Route>
        <Route path="/todo-list" exact>
          <TodoList />
        </Route>
      </div>
    </BrowserRouter>
  );
}

export default Router;

• 各コンポーネントに対してコンポーネント名と同じ名前のURLを割り振った
• ブラウザにそれぞれのページのURL(/hello、/counter、/todo-list)を直接入力してアクセスできることを確かめる

リンクを置いて行き来できるようにする

リンクを並べたコンポーネントを作る

• src/components配下にHeader.jsを作成する
• 3つのページへのリンクを置いておく

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

function Header() {
  return (
    <div>
      <NavLink to="/hello">Hello</NavLink>
      <NavLink to="/counter">Counter</NavLink>
      <NavLink to="/todo-list">TodoList</NavLink>
    </div>
  );
}

export default Header;

• react-routerが提供するNavLinkコンポーネント (opens new window)を使うことでページ遷移することができる
  • to属性に遷移先のURLを記載する

Headerコンポーネントを適用する

• src/router.jsにHeaderコンポーネントを追加する

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Hello from './components/Hello';
import Counter from './components/Counter';
import TodoList from './components/TodoList';
import Header from './components/Header'; // importを追加

function Router() {
  return (
    <BrowserRouter>
      <div>
        <Header /> {/* Headerコンポーネントを追加 */}
        <Route path="/" exact>
          <Hello />
        </Route>
        <Route path="/hello" exact>
          <Hello />
        </Route>
        <Route path="/counter" exact>
          <Counter />
        </Route>
        <Route path="/todo-list" exact>
          <TodoList />
        </Route>
      </div>
    </BrowserRouter>
  );
}

export default Router;

• Routerタグで囲われていない外側にHeaderコンポーネントを追加したので常にリンクが表示されるようになった
• ここまでで以下のように機能は完成した

styleを整える

• 最後にリンクの見た目を整える
• src/components/Header.jsを修正する

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

// styleの定義を追加
const styles = {
  link: {
    backgroundColor: '#fff',
    border: 'solid 1px',
    borderColor: '#e70000',
    borderRadius: '2px',
    color: '#e70000',
    display: 'inline-block',
    margin: '3px',
    padding: '8px',
    textDecoration: 'none'
  },
  linkActive: {
    backgroundColor: '#e70000',
    color: '#fff'
  }
};

function Header() {
  return (
    <div>
      {/* style属性とactiveStyle属性を追加 */}
      <NavLink style={styles.link} activeStyle={styles.linkActive} to="/hello">
        Hello
      </NavLink>
      <NavLink style={styles.link} activeStyle={styles.linkActive} to="/counter">
        Counter
      </NavLink>
      <NavLink style={styles.link} activeStyle={styles.linkActive} to="/todo-list">
        TodoList
      </NavLink>
    </div>
  );
}

export default Header;

• NavLinkタグのstyle属性にstyleを指定することで見た目を整えている

• activeStyle属性に指定されたstyleは、表示されてるページと一致するリンクにだけ適用される

  • この機能はreact-routerで用意されいる (opens new window)

• これで完成

まとめ

• react-routerを使うとページ遷移を簡単に行うことができる