ふかしぎのReactさんぷるず

React Router v6 - Reactさんぷるず

最終更新 2022/01/26
React Router v6 についてのあれこれです。初心者向けです。
Webアプリケーション向けです。
説明で使用しているReactは17.0.2です。
説明で使用しているReact Router v6は6.2.1です。
React Routerの機能の説明はこちらに移動してください。

一歩目

そもそもrouterって?

インターネットはURLというアドレスがあります。
https://code.fukasigi.net/react/router/などです。
これは/react/の/router/の情報だというように意味を持つものです。
ですが最近はSPAというSingle Page Application(シングル・ページ・アプリケーション)の時代になってきました。
これはURLを変えてページ遷移せずに一つのアドレスで色々してしまおうというものです。
便利なのですが弊害が出てきます。
ひとつ前に戻りたいときに戻るボタンが使えないのです!
あとブックマークしても再表示した時にいつも同じページしか表示されないのです!
このためにやっぱりURLの変更は必要だよねという話になりRouterがうまれました。
例えばショッピングサイトでバッグの販売ページは/bag/というURL。服のページは/clothes/というぐあいにRouterでURLを変更していきます。
これでバッグの販売ページでお気に入りに入れたら再びバッグのページを表示できます。
これが理由の一つです。
もう一つは検索サイトです。
検索サイトはURLで判断します。
URLが同じならばバッグの販売ページも衣服の販売ページも同じページだと判断されます。
これでは検索結果にも出にくくなり集客にも影響を及ぼします。
検索サイト対策にもURLの変更は必要だよね。ということになります。
このようにURLを変更することによりメリットがある場合のみRouterが有効です。
メリットがないのならわざわざ導入する必要はありません。

ReactでRouter

React自体にはRouterの機能はありません。
なので追加でRouter機能を入れなくてはいけません。
それが「React Router (https://reactrouter.com/)」です。
2022/01/15時点ではVer.6です。
注意してください!React Routerはバージョンが上がるたびに結構な変更をしてきます。
Ver.5など前のバージョンを元に解説しているものが役に立たなくなることが多々あります。
まずは自分の使うReact Routerのバージョンと参考文献のバージョンを確認してください。
React Routerの導入は簡単です。
npmで「npm install react-router-dom@6」とするだけです。
npm install react-router-dom@6
これでインストールは完了です。
インストールなんてしたくないけどちょっとReact Routerを使ってみたいと言う人はこのページの下の方にある「CDNを使って<script>でReact Routerを動かす」を見てください。インストールすら必要ありません。

react-routerとreact-router-domの違い

react-router-domはreact-routerにDOMに関する機能(BrowserRouterなど)を追加した物です。
react-routerでできることは全てreact-router-domでもできます。
DOM機能を必要ない人はreact-routerを使用しましょう。

バージョンの違い

Ver.5からVer.6へ変更点(Switchの廃止など)が多くあります。
何かを参考にしてプログラミングをしてもうまくいかないときは参考にしたものがVer.5とVer.6のどっちなんかを疑ってください。
エラーに関しては下の方の「エラーに関するあれこれ」を参考にして下しださい。
Ver.5以前もバージョンが上がるたびに色々と修正がかかっているので参考文献と自分が使うバージョンの違いには注意しましょう。

Routerの具体的な設定

Routerを実際に使うにはクライアントサイドとサーバーサイドの両方の設定が必要になります。

クライアントサイド

クライアントサイドはReact RouterでURLを変えます。

サーバーサイド

サーバーサイドも変える必要があります。
サーバーサイドを変えないとReact RouterでURLを変えてもそんなページないよと404 not foundを返されてしまいます。
サーバーサイドはどのURLでもReactが動いているページに移動させます。
具体例
アクセスするのは「https://code.fukasigi.net/react/router/sample00/」
ReactのJavaScriptが実際に動いているのは「https://code.fukasigi.net/react/router/sample00/index.php」
たとえ「https://code.fukasigi.net/react/router/sample00/link1」にアクセスされようがサーバーサイドの内部的には「https://code.fukasigi.net/react/router/sample00/index.php」に移動する。
と言った仕組みになります。
apache
WEBサーバーが何で動いているかによりますが、apacheだと.htaccessを使用するがあります。
https://code.fukasigi.net/react/router/sample00/のフォルダーで.htaccessに「RewriteRule .* index.php [L]」と設定しておきます。
こうすることにより「https://code.fukasigi.net/react/router/sample00/」の末尾にどんなアドレスが追加されようがhttps://code.fukasigi.net/react/router/sample00/のindex.phpが実行されます。
あくまでサーバーサイドでの内部的な処理なのでクライアントサイドのブラウザ側ではアドレス欄に「https://code.fukasigi.net/react/router/sample00/link1」と表示されます。
webpack-dev-server
開発中に簡易サーバーで動作確認をしたいときがあります。
そんなときは簡易サーバーで設定を行います。
webpack-dev-server起動時に--history-api-fallbackオプションを加える。※注意してくださいオプションのハイフンは二つです。
もしくはwebpack.config.jsでdevServerにhistoryApiFallback: true,と設定します。
devServer: {
  open: true,
  host: 'localhost',
  historyApiFallback: true,
},
historyApiFallbackをtrueにすることにより、もし存在しないURLを指定されてもwebpack-dev-server起動時のindex.htmlが実行されます。
historyApiFallbackはrewritesでルールを設定することによりもっと細かい設定ができます。
DevServer - devServer.historyApiFallback (https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback)

エラーに関するあれこれ

React RouterのSwitchでエラーが出る

react-router-domのバージョンを確認してください。6.2.1などのバージョン6になっていませんか?バージョン6では5までと変更された点があります。
Switchは廃止されRoutesに変更になりました。
もし書籍やネットの情報を参考にコーディングしているのならその情報は古いです。注意してください。
react-router-domのバージョンの調べ方?コマンドラインで「npm view react-router-dom version」で調べられます。

React RouterのRedirectでエラーが出る

react-router-domのバージョンを確認してください。6.2.1などのバージョン6になっていませんか?バージョン6では5までと変更された点があります。
Redirectは廃止されNavigateに変更になりました。
もし書籍やネットの情報を参考にコーディングしているのならその情報は古いです。注意してください。
react-router-domのバージョンの調べ方?コマンドラインで「npm view react-router-dom version」で調べられます。

React RouterのuseHistoryでエラーが出る

react-router-domのバージョンを確認してください。6.2.1などのバージョン6になっていませんか?バージョン6では5までと変更された点があります。
useHistoryは廃止されuseNavigateに変更になりました。
もし書籍やネットの情報を参考にコーディングしているのならその情報は古いです。注意してください。
react-router-domのバージョンの調べ方?コマンドラインで「npm view react-router-dom version」で調べられます。

React RouterのuseRouteMatchでエラーが出る

react-router-domのバージョンを確認してください。6.2.1などのバージョン6になっていませんか?バージョン6では5までと変更された点があります。
useRouteMatchは廃止されuseMatchに変更になりました。
もし書籍やネットの情報を参考にコーディングしているのならその情報は古いです。注意してください。
react-router-domのバージョンの調べ方?コマンドラインで「npm view react-router-dom version」で調べられます。

CDNを使って<script>でReact Router v6を動かす

script要素でCDN経由で読み込み動かす方法です。
BABELもCDN経由で読み込みその場でトランスパイルします。
そのためJSXのコードが丸見えになります。
方法
1.CDN経由で読み込む。react、react-dom、react-router-dom、babel
2.<script type="text/babel">内にJSXを記述する。
です。
と思ったら動きません!!!
react-router-domだけを読み込めばいいのかと思ったら他のも必要でした。
3.追加でhistoryとreact-routerもCDN経由で読み込んでください。
実際に動くサンプルは下のリンクのサンプル0なります。
具体的な記述はサンプル0のリンク先のソースコードを見てください。リンク先のサンプル0で右クリックで「ページのソースを表示する」で表示できます。
サンプル0
今回サンプル0で読み込んだCDNへのリンク集です。
React
https://cdnjs.com/libraries/react
https://cdnjs.com/libraries/react-dom
React Router
https://cdnjs.com/libraries/react-router
https://cdnjs.com/libraries/react-router-dom
react-routerも読み込まないと「Uncaught TypeError: Cannot read properties of undefined (reading 'Routes')」と怒られます。
History
https://cdnjs.com/libraries/history
historyも読み込まないと「Uncaught TypeError: Cannot read properties of undefined (reading 'createBrowserHistory')」と怒られます。
Babel
https://cdnjs.com/libraries/babel-standalone

cjsとumd

https://cdnjs.com/libraries/reactを設定しようとしたときによく見ると同じバージョンなのにURLにcjsやumdの違いがあるものがあります。
これはモジュールシステムの違いです。
cjsはCommonJSのモジュールシステムを使っています。
umdはUniversal Module Definitionの略称でフロントエンドとバックエンドのどちらでも動作します。
今回はscript要素で読み込むので必ずumdの方を使用してください。
cjsのほうでは動きません!

integrityのすすめ

CDNで読み込む際にはできる限りintegrityを設定しましょう。
ブラウザーが読み込もうとしているJavaScvriptファイルが途中で改ざんされていないかチェックするのでセキュリティ対策になります。
cdnjs.comでは使用するCDNの</>アイコン(Copy Script Tag)をクリックすればintegrityが含まれているscript要素を取得できます。

React Router v6の機能

React Router v6の機能の説明はこちらに移動してください。

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次