React Routerでルーティング処理

React Routerでルーティング処理

react-router-domを使ったページ遷移を実装

準備

webpackで開発環境を作るのは少し手間なのでcreate-react-appを活用させてもらう。

以下のコマンドでアプリ作成

$ npx create-react-app react-router-test

アプリが作成出来たら”react-ruoter-test”ディレクトリまで移動して必要なライブラリをインストール

$ npm i react-router-dom

ルーティング実装

ルーティング機能を使用するためreact-router-domからBrowserRouterをインポート。

インポートしたBrowserRouterでラップする事でルーティングが可能になります。
ルートコンポーネントになるAppコンポーネントをBrowserRouterのエイリアスであるRouterでラップします。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom'; // 追加
import App from './App';

ReactDOM.render(
  <Router>
    <App />
  </Router>, 
  document.getElementById('root')
);

App.js

Home, Page1, Page2 という文字だけを返すコンポーネントを作成

const Home = () => {
  return (
    <div>HOME</div>
  )
}

const Page1 = () => {
  return (
    <div>Page1</div>
  )
}

const Page2 = () => {
  return (
    <div>Page2</div>
  )
}

react-router-domからRouteコンポーネントをインポートしてルーティングを行う。
URLがpathと一致した時にcomponentに指定されているコンポーネントを表示する。
下記の例では、

  • http://localhost:3000/
    Homeコンポーネントを表示
  • http://localhost:3000/page1
    Page1コンポーネントを表示
  • http://localhost:3000/page2
    Page2コンポーネントを表示

App.js

import React from 'react'
import { Route } from 'react-router-dom'

const Home = () => {
  return (
    <div>HOME</div>
  )
}

const Page1 = () => {
  return (
    <div>Page1</div>
  )
}

const Page2 = () => {
  return (
    <div>Page2</div>
  )
}

const App = () => {
  return (
    <div>

      <Route exact path="/" component={Home} />

      <Route path="/page1" component={Page1} />

      <Route path="/page2" component={Page2} />
      
    </div>

  )
}

export default App;

アドレスバーに”/”や”/Page1″を打ち込むと、文字列が表示されるはずです。

exact

exactプロパティは、URLパターンを完全一致で判定させたい場合に使用します。

exactプロパティを使用していないので “http://localhost:3000/page1“にアクセスした時にHome, Page1コンポーネントの両方が表示されてしまう。

<Route path="/" component={Home} />

// exactプロパティを付与する事でpathに完全一致しない限りマッチすることはないので
// "/Page1"と"Page2" は "/" にマッチしなくなる
// <Route exact path="/" component={Home} />

<Route path="/page1" component={Page1} />

<Route path="/page2" component={Page2} />

現在の状態では手動でURLに変更を加えないとルーティングが動作しません。

定義したパスへのリンクをクリックで遷移するためにLinkコンポーネントを利用します。


Linkコンポーネントは最終的に<a>タグに変換されるのでtitile, classNameなどのアンカー要素に付与出来る属性は使用可能です。
to属性でリンク先のURLを指定します。


同様にreact-router-domからインポートします。

import React from 'react'
import { Route, Link } from 'react-router-dom'

const App = () => {
  return (
    <div>

      <nav>

        <Link to="/">Home</Link>

        <Link to="/page1">Page1</Link>

        <Link to="/page2">Page2</Link>

      </nav>

      <Switch>
        <Route exact path="/" component={Home} />

        <Route path="/page1" component={Page1} />

        <Route path="/page2" component={Page2} />

      </Switch>

    </div>

  )
}

export default App;

Switch

switchコンポーネントを使用することで
定義していないURLに遷移しようとした時にエラーページを表示するためにはSwtictコンポーネントを使用します。

Switchコンポーネントで囲むと、上から検索をしていきマッチしたRouteのみを描画します。

プログラミング言語のswitch文と似ているので直感的で分かりやすいと思います。

import React from 'react'
import { Switch, Route, Link } from 'react-router-dom'

...

// NotFoundページを表示するコンポーネントを作成
const NotFound = () => {
  return (

    <div>Not Found</div>

  )
}

const App = () => {
  return (
    <div>

      <nav>

        <Link to="/">Home</Link>

        <Link to="/page1">Page1</Link>

        <Link to="/page2">Page2</Link>

      </nav>

      <Switch>

        <Route exact path="/" component={Home} />

        <Route path="/page1" component={Page1} />

        <Route path="/page2" component={Page2} />

        <Route component={NotFound} />

      </Switch>

    </div>

  )
}