. React Routerを利用したルーティング設定の基礎 | アールエフェクト
React Routerを利用したルーティング設定の基礎 | アールエフェクト
React Routerを利用したルーティング設定の基礎 | アールエフェクト

入門者でもわかるReact Routerを利用したルーティング設定の基礎

React Routerは複数のページを持つReactアプリケーションを構築する際に利用されるライブラリです。複数のページが存在するということはブラウザからアクセスするためのURLが複数存在することになります。レイアウトなどの共通部分もありますがページ毎に異なるコンポーネントで構成されているためURLとコンポーネントを紐づける仕組みが必要となります。その役割を担うのがReact Routerです。React Routerを利用することで例えばブラウザからURLの/aboutにアクセスするとAboutコンポーネントの内容を表示、別のURLである/contactにアクセスするとContactコンポーネントの内容を表示させるといったことが可能になります。

本文書ではReact Routerを初めて設定する人を対象にシンプルなコードを使ってReact Routerの基本について説明を行っています。一緒に手を動かすことでReact Routerの理解を深めることができます。

本文書はReact Router v5を利用して動作確認を行っていますReact Router v6については下記を参考にしてください。

React Router v6 はじめでもわかるルーティングの設定方法の基礎
  • 1 プロジェクトの作成
    • 1.1 React Routerのインストール
    • 1.2 Reactの動作確認
    • 2.1 はじめてのルーティング設定
    • 2.2 exactの設定
    • 3.1 Switchコンポーネントの設定
    • 4.1 Linkコンポーネントの設定
    • 4.2 NavLinkコンポーネントの設定
    • 5.1 propsを取得
    • 5.2 Postコンポーネントの追加
    • 5.3 リンクの設定
    • 5.4 Postsコンポーネント内でのルーティング設定
    • 5.5 useParamsフックによるidの取得
    • 5.6 useRouteMatchフックの利用
    • 6.1 useLocationフックの設定

    プロジェクトの作成

    % npx create-react-app react-router-practise create-react-appコマンドでなくviteを利用したnpm create vite@latestコマンドでプロジェクトを作成することもできます。 React Routerのインストール % cd react-router-practise % npm install react-router-dom@v5 Reactの動作確認 function App() < return (

    Hello React Router

    ); > export default App; % npx start Compiled successfully! You can now view react-router-practise in the browser. Local: http://localhost:3000 On Your Network: http://192.168.2.184:3000 Note that the development build is not optimized. To create a production build, use npm run build.

    ブウラザからhttp://localhost:3000にアクセスしてHello React Routerが表示されるか確認します。

    ルーティングの設定

    function App() < return (

    Hello React Router

    ); > function Home() < return

    Home

    ; > function About() < return

    About

    ; > function Contact() < return

    Contact

    ; > export default App; ここではApp.jsファイルにHome, About, Contactコンポーネントを記述していますが通常はコンポーネント毎にファイルを独立させimportとして利用します。 はじめてのルーティング設定 import < BrowserRouter, Route >from 'react-router-dom'; function App() < //略 import < BrowserRouter, Route >from 'react-router-dom'; function App() < return (

    Hello React Router

    ); >

    BrowserRouterにはエイリアス(別名)としてRouterという名前を設定することもできます。その場合はBrowerRouter as Routerと記述します。エイリアスを利用した場合はタグの名前がBrowserRouterではなくRouterとなります。

    import < BrowserRouter, Route >from 'react-router-dom'; function App() < return (

    Hello React Router

    /> ); > 後ほどコンポーネントでのpropsの受け取りの中で説明を行いますが記述する方法によって動作が変わります。 import < BrowserRouter, Route >from 'react-router-dom'; function App() < return (

    Hello React Router

    ); > exactの設定

    Hello React Router

    exactを設定するのはpathが”/”の場合のみで他のルーティングに設定する必要はありません。

    ページがない404 Not Foundの設定

    下記のようにルーティングに設定がないURLにアクセスがあるとaboutbに対応するコンポーネントが存在しないので”Hello React Router”以外の文字列は表示されません。

    function NotFound() < return

    Not Found Page

    ; > function App() < return (

    Hello React Router

    ); >

    NotFoundのRouteコンポーネントを設定後、ルーティングに設定していないパスへのアクセスを行うとすべてNot Found Pageが表示されることが確認できます。

    しかし、/(ルート), /about, /contactにアクセスするとNot Found Pageの文字列が必ず一緒に表示されます。

    Switchコンポーネントの設定 import < BrowserRouter, Route, Switch >from 'react-router-dom'; function App() < return (

    Hello React Router

    ); >

    リンクの設定

    Linkコンポーネントの設定 NavLinkコンポーネントの設定 .active

    Dynamic Routeの設定

    propsを取得

    これまでの設定では/aboutにアクセスするとAboutコンポーネント, /contactにアクセスするとContactコンポーネントが表示されURLとコンポーネントが1対1の対応でした。コーポレートサイトなどのページ数が少ない場合はこれで問題はありませんがブログサイトのように/postsの下に/posts/1,/posts/2…, /posts/100にページが存在する場合にそれぞれのURLに対応するコンポーネントを作成することは現実的ではありません。そのような場合にDynamic Routeを利用します。/posts/1にアクセスがあると1というURLにアクセスがあったことを識別しその1の情報を元に動的にページの内容を変えていきます。Dymamic Routeによって複数のURLに1つのコンポーネントが紐づけられるという設定が可能になります。

    propsの中にはhistory, location, matchオブジェクトが含まれていることがわかります。locationやmatchにはアクセスのあったURLのパス情報が含まれていることがわかります。

    Postコンポーネントの追加 function Post(props) < const return Post ; > リンクの設定 const posts = [ < id: 1, title: 'React', content: 'React Tutorial' >, < id: 2, title: 'Vue', content: 'Vue.js Tutorial' >, < id: 3, title: 'Laravel', content: 'Laravel Tutorail' >, ]; function Post(props) < const const post = posts.find((post) =>post.id === id); return ( ); > Postsコンポーネント内でのルーティング設定 /> //exactを削除 */> //削除 useParamsフックによるidの取得 import < BrowserRouter, Route, Switch, NavLink, useParams, >from 'react-router-dom'; //略 function Post() < // const const < id >= useParams(); const post = posts.find((post) => post.id === Number(id)); return ( ); > id: "2"

    propsをPostコンポーネント内で取得する際にRouteコンポーネントのcomponent propsを利用するように変更を行いましたがuserParamsを利用する場合はcomponent propsを利用せず下記のような記述でもidを取得することができます。

    //propsを利用する場合は useRouteMatchフックの利用 propsの場合ではuserRouteMatchで取得したurlはprops.match.url, pathはprops.match.pathで取得することができます。

    useHistory, useLocationフック

    コンポーネントにが取得できるpropsの中にはhistory, location, matchのオブジェクトが入っていることを確認し、useRouteMatchフックを使うことでmatchの内容を取得できることがわかりました。残りのhistory, locatinについてもそれぞれuseHistory, useLocationフックを利用して取得することができます。Postコンポーネント内でconsole.logを利用して確認してみましょう。useHistory, useLocationフックも利用するためにはimportが必要です。

    ブラウザのコンソールを確認するとpropsで取得したhistory, location, matchの中身で同じであることが確認できます。

    useLocationフックの設定

    useLocationフックから取得したオブジェクトにはpathname, search, hash, state, keyプロパティがあります。それらには値が入っていませんがいつ設定するのでしょう。

    これまではtoに文字列でURLを入力していただけでしたが、オブジェクトとして先ほどuserLocationフックで表示されたpathname, search, hash, stateが設定できることがわかります。

    /$?sort=asc`>> hash: "" key: "vdlraw" pathname: "/posts/1" search: "?sort=asc" state: undefined /$`, search: '?sort=desc', >> > hash: "" key: "47u01n" pathname: "/posts/1" search: "?sort=desc" __proto__: Object const query = new URLSearchParams(useLocation().search); console.log(query.get('sort')); //コンソール desc

    Redirectの設定

    import < BrowserRouter, Route, Switch, NavLink, Link, useParams, useRouteMatch, Redirect, >from 'react-router-dom'; function App() < const authenticated = false; //略 : > //略

    React Router v6については下記を参考にしてください。

    React Router v6 はじめでもわかるルーティングの設定方法の基礎 Headless UIのTanStack Tableライブラリでテーブルの実装方法を学ぶ 進化が止まらない！Next.js13の基本機能をしっかり理解しよう MERNにおけるJWT認証設定を基礎から理解(ローカルストレージ編) 入門者でもわかるReact Routerを利用したルーティング設定の基礎 GatsbyJSでの画像の追加がわかる スキルアップコンテンツ 最新投稿コンテンツ

    目次

    • 1 プロジェクトの作成
      • 1.1 React Routerのインストール
      • 1.2 Reactの動作確認
      • 2.1 はじめてのルーティング設定
      • 2.2 exactの設定
      • 3.1 Switchコンポーネントの設定
      • 4.1 Linkコンポーネントの設定
      • 4.2 NavLinkコンポーネントの設定
      • 5.1 propsを取得
      • 5.2 Postコンポーネントの追加
      • 5.3 リンクの設定
      • 5.4 Postsコンポーネント内でのルーティング設定
      • 5.5 useParamsフックによるidの取得
      • 5.6 useRouteMatchフックの利用
      • 6.1 useLocationフックの設定