deve.K

エンジニアが未来を切り開く。

React【SPA】react-router-dom v6でルーティング

react画像

react-router-domとは

まず、React-Router-dom?『React-Router』ではないの?と疑問に思われた方に説明します。

技術的には3つの異なるパッケージがあります。

React Router

React Router DOM

React Router Nativeです。

それぞれの主な違いは、その使い方にあります。

React-Router-DOMはWebアプリケーション用となっており、React-Router-NativeはReact Nativeで作られたモバイルアプリケーション用です。

React RouterライブラリをインストールするReact 開発者はこれらに混乱し、React-RouterパッケージやReact-Router-DOMこの2つは多くの点で似ていますが、異なる点もあります。

React-Router-DOMはReactで構築されたWebアプリにルーティング機能を追加するために必要なライブラリです。

ブラウザ用のReactアプリケーションを構築している場合は、このReact-Router-DOMが必要になります。

React-Router-DOMには、React-Routerのすべてが含まれています。

つまりReact-Router-DOMは、React-Routerのラッパーでありブラウザで動作させることを想定しています。

React RouterとReact Router DOMを一緒に使用する必要はありません。

両方を使用している場合は、React-Router-DOM内の依存関係として既にインストールされているため、React Routerを削除しても問題ありません。

ほとんどの場合では、メインのReact-Routerライブラリをインポートする必要はありません。

ただし、React-Router-DOM はブラウザでのみ使用できるため、Webアプリケーションでしか使用できないことに注意してください。

SPA(シングルページアプリケーション)開発をする際に導入されるルーティングライブラリとなります。

Reactでは、SPAを構築するための一般的なライブラリです。

Reactを学び使われてる方々は必ず通るであろう門でもあります。

react-router-domの仕組み

異なるコンポーネントとURLを紐付けし

ルーティング機能でDOMを書き換えて複数のページがあるかのように見せてDOMを変更しても

URLが変わらないのでブラウザからは1つのページとして認識されます。

指定したパスによりコンポーネントがルーティングされます。

アプリケーションは単一のページに含まれているため、ブラウザの進む/戻るボタン自体に依存することはできません。

ページ全体のリロードを行うのではなく、ページ内で更新が必要な箇所のみ更新を行うためページ全体のリロードを行う必要がなくなり高速なページ遷移のブラウザが実装できます

react-router-domの導入

react-router-domを使用するにはまずパッケージをインストールしなければいけません。

$ npm install react-router-dom
$ yarn add react-router-dom

npmまたはyarnどちらかでインストールします。

package.jsonにreact-router-domがしっかりと追加されてれば問題なくインストールは完了です。

パッケージ名の横はご自身がインストールしたパッケージのバージョンとなるので必ず確認もしておきましょう。

バージョンがv5とかになっている方は最新版でインストールを推奨します。

当記事では6.0.0からでないと対応されていません

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^6.0.2",

実際に使ってみる

ここではCRAのApp.jsファイルを編集し使用していきます。

React-Router-domで通常のリンクを作成する方法は、Linkコンポーネントを使用することです。

まずはインストールしたパッケージのモジュールを使用する必要な数だけimportをしないといけません。

import React from "react";
import {
  BrowserRouter,  
Routes,
  Route,
  Link
} from 'react-router-dom';

importした要素を解説致します

まずはBrowserRouterで全体を囲ってあげます。

このファイルでは、BrowserRouterコンポーネントをインポートし、そのコンポーネントを使用してApp.jsで他のものをラップしていきます。

他の種類のルーターは用途が異なりますが、ドキュメントではWebアプリにBrowserRouterを推奨しております。

const App = () => {
  return (
 <BrowserRouter>
 <div>
 <Link to='/'>Home</Link>
 <Link to='about'>About</Link>
 <Link to='users'>Users</Link>

 <Routes>

<Route path="/" />

<Route path="about" element={<About />} />

<Route path="users" element={<Users />} />

  </Routes>
</div>
 </BrowserRouter>
  );
}

要素としてRoutes・Route・Linkを使用します。

またBrowserRouterは1プロジェクトにつき1回しか使えません。

構造が分かった所で要素それぞれの意味を理解していきましょう。

LinkのtoはHTMLのaタグと同じでリンク先のURLとなりますReactの場合aタグの代用としてこちらを使います。

クリックして別のビューに移動できます。

 <Link to='/about'>About</Link>

Routeは2つのReactのPropsやpathおよびelementを取ります。

レンダリングされる要素はelementで囲みます。

Routeの終了タグは不用なので、末尾にスラッシュで閉じてあげます。

<Route path="/about" element={<About />} />

RouteではURLに一致したコンポーネントを自動で見つけてくれて、パスの指定は相対パスでの設定も可能となります。

             //相対パス
<Route path='about' element={<About />} />

相対パスの場合は( / )が必要ありません。

パスにはそれぞれのコンポーネントのURLが含まれ、要素にはレンダリングする必要がある実際のコンポーネントが含まれます。

正確なルートパスを指定する際はexact指定はしませんこれはv5での機能です。

v6からはendに置き換わりそのPropsを使用し正確なルートを確保します。

v5の時とは違いますがここでは深掘り説明致しません。

詳しくは下記を参照下さい。

dev-k.hatenablog.com

Routes要素はRoute要素をラップしRouteとLink toそれらをレンダリングした親ルートに自動的にそしてシンプルでネスト化されたルートです

v5で実装されてた方々はSwitchがRoutesに置き換わったと思って下さい。

Routes要素で囲むと子要素であるRouteにRouteをネストも可能となります。

v5のSwitch要素の時とは違いクールなシンプルで分かりやすいコードとなっています。

 <Routes>

<Route path="/" />

<Route path="about" element={ <About /> } />

<Route path="users" element={ <Users /> } />

 </Routes>


ルーティング先

Home・About・Usersページがある事になりそれぞれLink設定されています。

App.jsが親コンポーネントとし、子のコンポーネントがルーティング先となります。

Homeのパスの指定がないのでAboutから見てみましょう

import React from "react";

const About = () => {
return(
<div>
<h1>Aboutページです。</h1>
</div>
)
}

export default About
import React from "react";

const Users = () => {
return(
<div>
<h1>Usersページです。</h1>
</div>
)
}

export default Users

コンポーネントでimportし読みこませ実際にコンポーネントがルーティングされるか確認しましょう。

reactのGIF画像

BrowserRouterを使用する際に名前が長いと思われたはずです。

もう少し短く使いやすくしたい場合にはエイリアス(別名)としてRouterという名前を設定する事が可能です。

『as』で記述します。

import {BrowserRouter as Router, …}

{// 通常は<BrowserRouter> }
 <Router> 
 <div>
 <Link to='/'>Home</Link>
 <Link to='about'>About</Link>
 <Link to='users'>Users</Link>

 <Routes>

<Route path="/" />

<Route path="about" element={<About />} />

<Route path="users" element={<Users />} />

  </Routes>
</div>
 </Router>

ここ最近でReactを学ばられる方は、npmでreact-routerなどをインストールするとv6がインストールされますv6がリリースされたのはごく最近となってとります。

古い書籍または教材で勉強すると意図しないエラーがスローされる可能性があります、導入する前にpackage.jsonでバージョンの確認は忘れないようにしてください。

学習の為に以前のバージョンが必要な場合は一度パッケージを削除してインストールし直すしかありません。

npm remove react-router

npm install react-router@v5
yarn remove react-router

yarn add react-router@v5

もしくは最初からバージョンを指定してインストールしてみて下さい。

アプリケーション全体でルーティング

< React.StrictMode >をReact-Router-dom の < BrowserRouter > コンポーネントに置き換えることができます。

そうする事によってアプリケーション全体でルーティングが利用できるようになり、ルーティング機能を使用してアプリケーションのさまざまな部分に移動できます。

<BrowserRouter> 
    <App /> 
</BrowserRouter>

最後に

React-Router-dom v6は多くの機能を備えたライブラリであり、ライブラリがどのように機能するかの基本的な通常Linkについて説明しました。

ナビゲーションリンクの作成やページのリダイレクトなどに関しましては別途記事に致します。

本日は以上となります。

最後まで読んで頂きましてありがとうございました。

プライバシーポリシー