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