はじめに
Reactのreact-router-domがメジャーバージョンアップした（バージョン6）とのことで、バージョン6の記法を勉強できていないため、バージョン5をインストールしたいです。
yarnを使って実施する方法をメモします。
前提
create-react-appを利用してReactアプリを作成している状態。（今回はReact×typescipt）
【結論】バージョンを指定してパッケージインストールする方法
react-router-domのバージョン5、かつマイナーバージョンは最新のものをインストールしたい場合
$ yarn add. react-router-dom@5.xreact-router-domのバージョン5.2をインストールしたい場合
$ yarn add. react-router-dom@5.2試したこと
普通にインストール
通常のインストールをする。
$ yarn add react-router-dom結果、以下のログが出てインストール完了する。v6がインストールされている。
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ react-router-dom@6.0.2
info All dependencies
├─ react-router-dom@6.0.2
└─ react-router@6.0.2package.jsonファイル、yarn.lockには以下が追記された。
{
"dependencies": {
・・・（省略）・・・
"react-router-dom": "^6.0.2",
・・・（省略）・・・
}react-router-dom@^6.0.2:
version "6.0.2"
resolved ・・・（省略）・・・
integrity ・・・（省略）・・・
dependencies:
history "^5.1.0"
react-router "6.0.2"[package.jsonとpackage-lock.json とは？（Node.js/React） - エンジニアを目指す日常ブログ](https://tomiko0404.hatenablog.com/entry/2021/10/07/package-json)
バージョン6.0.2から5.2に変更してみる
@5.2を指定してupgradeする。
$ yarn upgrade react-router-dom@5.2成功したログ。バージョン5.2.1がインストールされた。
[4/4] Rebuilding all packages...
success Saved lockfile.
success Saved 8 new dependencies.
info Direct dependencies
└─ react-router-dom@5.2.1
info All dependencies
├─ hoist-non-react-statics@3.3.2
├─ mini-create-react-context@0.4.1
├─ path-to-regexp@1.8.0
├─ react-router-dom@5.2.1
├─ react-router@5.2.1
├─ resolve-pathname@3.0.0
├─ tiny-warning@1.0.3
└─ value-equal@1.0.1react-router-domには、5.2.0と5.2.1のバージョンがある。今回、指定した5.2の中で最新のバージョンがインストールされた模様。
package.jsonとyarn.lockの記載は以下のように変わる。package.jsonはインストール時に指定したコマンドが載っているイメージで、yarn.lockは実際にインストールされたバージョンまで記載されている。
"react-router-dom": "5.2",react-router-dom@5.2:
version "5.2.1"
resolved ・・・（省略）・・・
integrity ・・・（省略）・・・
dependencies:
"@babel/runtime" "^7.12.13"
history "^4.9.0"
loose-envify "^1.3.1"
prop-types "^15.6.2"
react-router "5.2.1"
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"バージョン5の最新に変更する
@5を指定してupgradeする。
$ yarn add react-router-dom@5成功したログ。バージョン5.3がインストールされた。
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ react-router-dom@5.3.0
info All dependencies
└─ react-router-dom@5.3.0
Done in 47.35s.メジャーバージョンのみ指定したので、5の中で最新のバージョンがインストールされた模様。
package.jsonとyarn.lockの記載は以下のように変わる。
"react-router-dom": "5",react-router-dom@5:
version "5.3.0"
resolved ・・・（省略）・・・
integrity ・・・（省略）・・・
dependencies:
"@babel/runtime" "^7.12.13"
history "^4.9.0"
loose-envify "^1.3.1"
prop-types "^15.6.2"
react-router "5.2.1"
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"その他、注意点のメモ
^や~やxを利用した指定方法
package.jsonに自動的に追加されたレコードを見ると、^が使われている。
それぞれの使い方は以下の通り。
x：最新の数字を自動で入れてね、の意^：同じメジャーバージョンの中で最新を入れてねの意~：書いたところはその通りで、それ以下のバージョンは
使い方は以下のようになる。
$ yarn add. react-router-dom@5.x ※5.3がインストールされる
$ yarn add react-router-dom@^5.2 ※5.3がインストールされる
$ yarn add react-router-dom@~5 ※5.3がインストールされる試した結果からは、@5と書いても@5.xと書いても@^5.0と書いても良さそうだが、普通に使うのであれば@5.xあたりが安全か。
リリースされたバージョンの確認方法
以下サイトを確認。
または
$ yarn info react-router-domを実行する。
npmの場合は一度アンインストールする必要がある
npmの場合はupgradeが無いので、以下でアンインストールしてやり直す必要があるらしい。
$ npm remove react-router-domまとめ
パッケージのバージョンを指定してインストールする方法を確認した。
