deve.K

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

English

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


スポンサーリンク

react画像


create-react-appを使用しての説明となります。

react-router-domとは


SPA(Single Page Application)開発をする際に導入されるルーティングライブラリで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

どちらかでインストールします。

コマンド実行した後、package.jsonにreact-router-domがしっかりと追記されてれば問題なくインストールは完了です。

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

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

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

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

実際に使ってみる

ここではテンプレートのApp.jsファイルを編集し使っていきます

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

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

importした要素を軽く説明致します

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

その子要素としてRoutes・Route・Link・を使用します。また、BrowserRouterは1プロジェクトにつき1回しか使えません。

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

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

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

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


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

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

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


相対パスの場合は( / )が必要ありません。
Routes要素はRoute要素をラップしRouteとLink toそれらをレンダリングした親ルートに自動的にそしてシンプルでネスト化されたルートです
v5で実装されてた方々はSwitchがRoutesになったと思って下さい。

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

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

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という名前を設定する事が可能です。
つまりBrowserRouterちょっと名前長すぎするんでRouter!!と命名が可能となります『as』と書きます。

import {BrowserRouter as 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-Routerをさらに深く学び精通したい方はこちらで学ばれてみて下さい

dev-k.hatenablog.com

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

プライバシーポリシー