react-router vs react-router-dom
ルーティング
react-routerは、Reactアプリケーションにルーティング機能を提供するライブラリです。これにより、URLに基づいて異なるコンポーネントを表示したり、アプリケーション内でナビゲーションを管理したりできます。react-routerは、単一ページアプリケーション(SPA)における動的なルーティングを可能にし、ユーザーがURLを変更したときにページを再読み込みすることなくコンテンツを切り替えることができます。react-router-domは、react-routerのブラウザ向けの実装であり、ウェブアプリケーションに特化したコンポーネントや機能を提供します。これには、リンクを作成するための<Link>コンポーネントや、ブラウザの履歴を管理するための<BrowserRouter>コンポーネントなどが含まれています。
ルーティング機能
- react-router:
react-routerは、Reactアプリケーションにルーティング機能を提供します。これにより、URLに基づいて異なるコンポーネントを表示したり、アプリケーション内でナビゲーションを管理したりできます。
- react-router-dom:
react-router-domは、react-routerのブラウザ向けの実装であり、ウェブアプリケーションに特化したルーティング機能を提供します。これには、リンクを作成するための<Link>コンポーネントや、ブラウザの履歴を管理するための<BrowserRouter>コンポーネントが含まれています。
ブラウザサポート
- react-router:
react-routerは、ブラウザやモバイル環境に依存しないルーティング機能を提供します。
- react-router-dom:
react-router-domは、ブラウザベースのアプリケーションに特化しており、ブラウザの履歴APIやリンク機能を活用しています。
リンクの作成
- react-router:
react-routerは、リンクの作成に関する機能を提供しますが、特定のコンポーネントは含まれていません。
- react-router-dom:
react-router-domは、リンクを簡単に作成するための<Link>コンポーネントを提供しており、ナビゲーションを容易にします。
カスタムルーター
- react-router:
react-routerは、カスタムルーターを実装するための柔軟性を提供します。
- react-router-dom:
react-router-domは、ブラウザ向けのルーターを提供しますが、カスタムルーターの実装にはreact-routerが必要です。
サーバーサイドレンダリング(SSR)
- react-router:
react-routerは、サーバーサイドレンダリング(SSR)をサポートしています。
- react-router-dom:
react-router-domは、SSRに対応していますが、ブラウザ特有の機能に依存しています。
- react-router:
react-routerを選択するのは、Reactアプリケーションにルーティング機能を追加したいが、ブラウザやモバイル環境に特化した機能は必要ない場合です。例えば、サーバーサイドレンダリング(SSR)やカスタムルーターを実装する場合に適しています。
- react-router-dom:
react-router-domを選択するのは、ブラウザベースのアプリケーションでルーティングを実装したい場合です。特に、リンクやナビゲーションバーを簡単に作成したい場合や、ブラウザの履歴管理が必要な場合に便利です。
react-router is the primary package in the React Router project.
Installation
npm i react-router