トップ > React基礎 > React v17でのルーティングの基本： React Router DOM v6を使った初心者向けガイド

React v17でのルーティングの基本： React Router DOM v6を使った初心者向けガイド

React基礎 ライブラリ

React v17でのルーティングの基本： React Router DOM v6を使った初心者向けガイド

この記事では、React v17でreact-router-dom v6を使用した、初心者向けのルーティング方法の解説となります。

React v18以降で学習したい方は以下を参照ください。

dev-k.hatenablog.com

上記は、React v18でreact-router-dom v6以降を使用した、ユーザー認証アプリの解説をしています、ナビゲーションルーティングとリダイレクトを同時に学べます。

react-router-domとは

まず、React-Router-dom？（React-Router）ではないの？と疑問を持たれた方に向けて、説明します。

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

・ React Router： React Routerはルーティング機能を提供するためのライブラリであり、Reactアプリケーション全般で使用されます。React RouterはReact Router DOMとReact Router Nativeの基盤となるパッケージです。

・ React Router DOM： React Router DOMはReactで構築されたWebアプリケーションで使用されるライブラリです。ブラウザ用のReactアプリケーションにおけるルーティング機能を追加するために必要なパッケージです。React Routerの機能を含んでおり、React Routerをブラウザで動作させるためのラッパーとして機能します。

・ React Router Native： React Router NativeはReact Nativeで作られたモバイルアプリケーションで使用されるライブラリです。モバイルアプリケーションのルーティング機能を提供します。

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

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の主要なライブラリの一つです。

Reactを学び、利用されている方々にとっては、必ず通るべき道でもあります。

react-router-domの仕組み

異なるコンポーネントとURLの関連付けにより、ルーティング機能を使用して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以降からでないと対応されていません

// package.json

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

基本的なルーティング構成

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

まず、Reactアプリケーションでは、使用するモジュールに応じて必要な数だけインポートを行う必要があります。

// App.js

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

これらのモジュールには、BrowserRouter、Routes、Route、およびLinkが含まれます。

以下は、ReactアプリケーションのApp.jsファイルのコードです。

// App.js

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>
  );
}


BrowserRouterコンポーネントは、アプリケーション全体をルーティングのコンテキストでラップします。

react-router-domのドキュメントでは、WebアプリケーションにおいてBrowserRouterを推奨しています。

Routes、Route、およびLinkは要素として使用されます。

Routesコンポーネントは、Routeコンポーネントの集合を定義します。

Linkコンポーネントは、HTMLのaタグと同様に動作し、指定したURLへのリンクを提供します。クリックすることで別のビューに移動することができます。

Routeコンポーネントは、2つの重要なプロパティであるpathとelementを持ちます。

elementプロパティ内には実際に表示するコンポーネントを指定します。Routeコンポーネントは、URLに一致するコンポーネントを自動的に検出し、指定したパスに基づいてレンダリングします。

パスの指定は相対パスでも可能で、pathプロパティには各コンポーネントのURLが含まれます。elementプロパティには、実際にレンダリングする必要のあるコンポーネントが指定されます。

例えば、（"/"）パスはルートパスを表しており、（< Home />）コンポーネントがマッチした場合に表示されます。

// App.js

     <Routes>
  <Route path="/" element={<Home />} />
  <Route path="about" element={<About />} />
  <Route path="users" element={<Users />} />
    </Routes>

（"about"）パスは現在のパスからの相対パスを表しています。

例えば、現在のパスが（"/example"）の場合、（< About />）コンポーネントは（"/example/about"）のパスにマッチした場合に表示されます。

同様に、（"users"）パスも現在のパスからの相対パスを表しています。例えば、現在のパスが（"/example"）の場合、（< Users />）コンポーネントは（"/example/users"）のパスにマッチした場合に表示されます。

相対パスでは、ルートパスからの相対位置を指定するため、（"/"）を先頭に付ける必要はありません。

正確なルートパスを指定する場合は、exactプロパティを使用しません（これはv5の機能です）。v6以降では、endプロパティを使用して正確なルートを確保します。

// App.js

             //正確なルートパス指定
<Route path='/about' end element={<About />} />

endキーワードは、ルーティングの終了を示し、このルートが他のパスと競合しないことを保証します。

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

dev-k.hatenablog.com

ルーティング先

まず、App.jsが親コンポーネントとなり、ルーティング先として子コンポーネントであるHome、About、Usersページが存在します。それぞれのページに対してリンクを設定していきます。

以下はAboutコンポーネントとUsersコンポーネントのコードです。

// About.js

import React from "react";

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

export default About

// Users.js

import React from "react";

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

export default Users

これらのコンポーネントを親コンポーネントであるApp.jsにインポートし、実際にルーティングされるか確認します。

Reactルーティングのサンプル

た、BrowserRouterの名前が長いと感じた場合、Routerという別名を使用することで短く使いやすくすることができます。

以下は、エイリアス（as）としてRouterを使用したApp.jsのコードです

// App.js

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-router-domパッケージからRouter、Routes、Route、Linkモジュールをインポートしています。

Routerを使用してBrowserRouterの代わりにルーティングを行っています。

最後に注意点として、最近のReact学習者はreact-routerパッケージを使用している場合、バージョン6がインストールされることに注意する必要があります。

バージョン6は、比較的に最近リリースされたものであり、古い書籍や教材を使用している場合は予期しないエラーが発生する可能性があります。パッケージのバージョンを確認する際には、package.jsonファイルを参照してください。

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

npm remove react-router

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

yarn add react-router@v5

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

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

アプリケーション全体でルーティングを利用するために、React-Router-domのBrowserRouterコンポーネントを使用する際には、React.StrictModeを置き換えることができます。

以下は、index.jsファイルのコードです。

// index.js

import { BrowserRouter } from 'react-router-dom';

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

このコードでは、BrowserRouterコンポーネントを使用してアプリケーション全体でルーティングを利用できるようにしています。

React.StrictModeをBrowserRouterで置き換えることで、ルーティング機能を使用してアプリケーションのさまざまな部分に移動することが可能になります。

以下は、React v18以降でのindex.jsファイルのコードです。

// index.js

ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);

React.StrictModeコンポーネントを使用してアプリケーション全体でStrictモードを有効にし、BrowserRouterコンポーネントを使用してルーティングを利用しています。

React.StrictModeは、開発中に潜在的な問題を検出し、警告を表示するためのものです。本番環境では無効になります。

最後に

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

本日は以上となります。

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

この記事が役に立ったらブックマークと共有をしていただけると幸いです。

#react #React Hooks

dev04K 読者になる

広告を非表示にする
コメントを書く
プライバシーポリシー

© 2023 Icons8 LLC. All rights reserved.

© [deve.K], 2023. React logo is a trademark of Facebook, Inc. JavaScript is a trademark of Oracle Corporation and/or its affiliates. jQuery and the jQuery logo are trademarks of the JS Foundation. TypeScript and the TypeScript logo are trademarks of the Microsoft Corporation. Next.js and the Next.js logo are trademarks of Vercel, Inc. Firebase and the Firebase logo are trademarks of Google LLC. All logos edited by [deve.K].