こんにちは、コンポタ課長です!
皆さん、ReactはJavaScriptで使っていますか?それともTypeScript?
Reactって便利な分、色々な環境で使えるので、ネット上の記事と自分の環境が違うことって結構ありがちですよね。
今回はReact+Typescriptをお使いの「型指定意識」バッチリな皆さん向けに、ルーティング(ページ遷移)に便利で有名なライブラリ「react-router-dom」のインストール手順を載せておきます。
![コンポタ課課長](https://youonly.net/wp-content/uploads/2021/11/soup_vichyssoise_potage-1-150x150.png)
コンポタ課課長
早くページ遷移を実装したい…!
インストール手順
![書類を確認している手の様子を表した写真](https://youonly.net/wp-content/uploads/2022/02/ec63b0efa3782db84377d0e71181fcad.jpg)
前提
以下の状態を想定しています。
- パッケージ管理はnpm
- Reactは導入済み
インストール
では、インストール手順です。
コンソールで以下を実行しましょう。
npm install react-router-dom@5
npm install --save-dev @types/react-router-dom
下段のコマンドを実行することで、Typescriptで利用できるようになります。
またreact-router-domについては現在バージョン6系以降が公開されていますが、ここでは5系をインストールしています。
バージョン5系のreact-router-domをインストールしている理由
- ネット上の記事はバージョン5系を前提に書いている記事が圧倒的に多く、6系をインストールするとトラブルが起きた際に正しい情報を調べることが困難になるため、本記事では5系をインストールする事としています。
バージョン6系を使うことによって以下の記事のようなエラーが出たりするので、筆者としてはバージョン5系の利用をお勧めします。
![](https://youonly.net/wp-content/uploads/2021/12/f366162b4ea068019478d427f04d3727-320x180.jpg)
react-router-domでSwitchが使えずエラーが起きた話
Reactでページ遷移をしたいな~と思ったある日、事件は起きた。僕「ほ~ん、Reactのルーティングはreact-router-domってライブラリでやるんかぁ。よし、チュートリアルコピペっと!ん?なんか赤線あるな…?」Module ...
まとめ
![ノートにまとめている様子](https://youonly.net/wp-content/uploads/2022/04/note.jpg)
- react-router-domをインストールするコマンドをご紹介しました。
- バージョンは6系以降ではなく5系がオススメです!
今回紹介した手順での環境が、比較的利用者の多い一般的な構成だと思います。
ネット上の記事もこの構成が多いので、きっと開発がスムーズに進むと思います。
では、よきReactライフを!