プログラミング初心者のための入門ブログエンジニアが未来を切り開く。v6を使った初心者向けガイドこの広告は、90日以上更新していないブログに表示しています。v6を使用した、初心者向けのルーティング方法の解説となります。v18以降で学習したい方は以下を参照ください。v6以降を使用した、ユーザー認証アプリの解説をしています、ナビゲーションルーティングとリダイレクトを同時に学べます。基本的なルーティング構成ルーティング先アプリケーション全体でルーティング最後にreact-router-domとはまず、React-Router-dom?(React-Router)ではないの?と疑問を持たれた方に向けて、説明します。技術的には3つの異なるパッケージがあります。Routerはルーティング機能を提供するためのライブラリであり、Reactアプリケーション全般で使用されます。Nativeの基盤となるパッケージです。DOMはReactで構築されたWebアプリケーションで使用されるライブラリです。ブラウザ用のReactアプリケーションにおけるルーティング機能を追加するために必要なパッケージです。Routerをブラウザで動作させるためのラッパーとして機能します。Nativeで作られたモバイルアプリケーションで使用されるライブラリです。モバイルアプリケーションのルーティング機能を提供します。RouterライブラリをインストールするReact開発者の中には、混乱することもあるかもしれません。React-RouterパッケージとReact-Router-DOMパッケージは多くの点で似ていますが、異なる点もあります。React-Router-DOMは、Reactを使用して構築されたWebアプリにルーティング機能を追加するために必要なライブラリです。ブラウザ向けのReactアプリケーションを構築している場合は、React-Router-DOMが必要になります。Routerのすべての機能が含まれています。Routerのラッパーであり、ブラウザでの動作を想定しています。DOMを同時に使用する必要はありません。Routerを削除しても問題ありません。ほとんどの場合、メインのReact-Routerライブラリをインポートする必要はありません。React-Router-DOMはブラウザでのみ使用できるため、Webアプリケーションでのみ利用可能です。これらのパッケージは、シングルページアプリケーション(SPA)の開発に適しており、Reactの主要なライブラリの一つです。Reactを学び、利用されている方々にとっては、必ず通るべき道でもあります。react-router-domの仕組み異なるコンポーネントとURLの関連付けにより、ルーティング機能を使用してDOMを変更することで、複数のページが存在するかのような見た目を実現します。この方法ではURL自体は変化しないため、ブラウザは実際には1つのページとして扱います。指定したパスによって異なるコンポーネントが表示されるようにルーティングが設定されます。アプリケーションは単一のページ内に含まれているため、ブラウザの(進む/戻る)ボタンに頼ることはできません。この方法ではページ全体をリロードする必要はなく、必要な部分のみを更新することで高速なページ遷移を実現できます。したがって、ブラウザ上ではページが滑らかに切り替わるように見えます。react-router-domの導入react-router-domを使用するにはまずパッケージをインストールしなければいけません。react-router-domnpmまたはyarnどちらかでインストールします。package.jsonにreact-router-domがしっかりと追加されてれば問題なくインストールは完了です。パッケージ名の横はご自身がインストールしたパッケージのバージョンとなるので必ず確認もしておきましょう。バージョンがv5とかになっている方は最新版でインストールを推奨します。"^6.0.2",基本的なルーティング構成ここではCRAのApp.jsファイルを編集し使用していきます。Reactアプリケーションでは、使用するモジュールに応じて必要な数だけインポートを行う必要があります。'react-router-dom';これらのモジュールには、BrowserRouter、Routes、Route、およびLinkが含まれます。以下は、ReactアプリケーションのApp.jsファイルのコードです。);}BrowserRouterコンポーネントは、アプリケーション全体をルーティングのコンテキストでラップします。react-router-domのドキュメントでは、WebアプリケーションにおいてBrowserRouterを推奨しています。Routes、Route、およびLinkは要素として使用されます。Routesコンポーネントは、Routeコンポーネントの集合を定義します。Linkコンポーネントは、HTMLのaタグと同様に動作し、指定したURLへのリンクを提供します。クリックすることで別のビューに移動することができます。Routeコンポーネントは、2つの重要なプロパティであるpathとelementを持ちます。elementプロパティ内には実際に表示するコンポーネントを指定します。Routeコンポーネントは、URLに一致するコンポーネントを自動的に検出し、指定したパスに基づいてレンダリングします。パスの指定は相対パスでも可能で、pathプロパティには各コンポーネントのURLが含まれます。elementプロパティには、実際にレンダリングする必要のあるコンポーネントが指定されます。/>)コンポーネントがマッチした場合に表示されます。</Routes>("about")パスは現在のパスからの相対パスを表しています。/>)コンポーネントは("/example/about")のパスにマッチした場合に表示されます。同様に、("users")パスも現在のパスからの相対パスを表しています。/>)コンポーネントは("/example/users")のパスにマッチした場合に表示されます。相対パスでは、ルートパスからの相対位置を指定するため、("/")を先頭に付ける必要はありません。正確なルートパスを指定する場合は、exactプロパティを使用しません(これはv5の機能です)。v6以降では、endプロパティを使用して正確なルートを確保します。/>endキーワードは、ルーティングの終了を示し、このルートが他のパスと競合しないことを保証します。詳しくは以下を参照下さい。dev-k.hatenablog.comルーティング先まず、App.jsが親コンポーネントとなり、ルーティング先として子コンポーネントであるHome、About、Usersページが存在します。それぞれのページに対してリンクを設定していきます。以下はAboutコンポーネントとUsersコンポーネントのコードです。{return(<div><h1>Aboutページです。{return(<div><h1>Usersページです。Usersこれらのコンポーネントを親コンポーネントであるApp.jsにインポートし、実際にルーティングされるか確認します。BrowserRouterの名前が長いと感じた場合、Routerという別名を使用することで短く使いやすくすることができます。</Router>上記のコードでは、react-router-domパッケージからRouter、Routes、Route、Linkモジュールをインポートしています。Routerを使用してBrowserRouterの代わりにルーティングを行っています。最後に注意点として、最近のReact学習者はreact-routerパッケージを使用している場合、バージョン6がインストールされることに注意する必要があります。バージョン6は、比較的に最近リリースされたものであり、古い書籍や教材を使用している場合は予期しないエラーが発生する可能性があります。パッケージのバージョンを確認する際には、package.jsonファイルを参照してください。学習の為に以前のバージョンが必要な場合は一度パッケージを削除してインストールし直すしかありません。react-router@v5もしくは最初からバージョンを指定してインストールしてみて下さい。アプリケーション全体でルーティングアプリケーション全体でルーティングを利用するために、React-Router-domのBrowserRouterコンポーネントを使用する際には、React.StrictModeを置き換えることができます。以下は、index.jsファイルのコードです。document.getElementById('root'));このコードでは、BrowserRouterコンポーネントを使用してアプリケーション全体でルーティングを利用できるようにしています。React.StrictModeをBrowserRouterで置き換えることで、ルーティング機能を使用してアプリケーションのさまざまな部分に移動することが可能になります。v18以降でのindex.jsファイルのコードです。/></BrowserRouter></React.StrictMode>,document.getElementById('root'));React.StrictModeコンポーネントを使用してアプリケーション全体でStrictモードを有効にし、BrowserRouterコンポーネントを使用してルーティングを利用しています。React.StrictModeは、開発中に潜在的な問題を検出し、警告を表示するためのものです。本番環境では無効になります。v6は多くの機能を備えたライブラリであり、ライブラリがどのように機能するかの基本的な通常Linkについて説明しました。本日は以上となります。最後まで読んで頂きありがとうございました。この記事が役に立ったらブックマークと共有をしていただけると幸いです。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。