【実装例付き】Reactのルーティング方法

FRONT END

LiSMO techの小谷です。今回はReact.jsのルーティング方法について紹介します。

 

まず、初めに注意書きを書いておきます。
今回、実装例を載せていますが、create-react-appで作った状態のものから実装をしています。
create-react-appは簡単にReactの開発に必要な環境を用意してくれるものです。

 

ルーティング方法については、react-router-domというライブラリを使用して実装していきます。
react-router-domのバージョンは6.3.0を使用しました。バージョンによって微妙に書き方が違う点もあるようなので、ご注意下さい。

 

また、React.jsについては以下のような記事もありますので、ご参考になれば幸いです。

 

参考例付き!Reactでのスタイリング方法について

React.jsの基礎 | state・propsについて

【React.js】クラスコンポーネントと関数コンポーネントの書き方について

 

では、本題に入っていきます!

 

実装例 画面の作成

以下の公式ページを参考にやっていきます。
https://reactrouter.com/docs/en/v6/getting-started/overview#configuring-routes

①react-router-domをインストール
以下のコマンドでreact-router-domをインストールします。

npm i react-router-dom

②以下のようにコードを書く
ルーティングを試すだけなので、必要最低限のものしか書いていないです。

// src\pages\top.js
function Top() {
  return (
    <div>
      <h1>トップ画面</h1>
    </div>
  );
}

export default Top;

 

// src\pages\setting.js
function Setting() {
  return (
    <div>
      <h1>設定画面</h1>
    </div>
  );
}

export default Setting;

 

// src\App.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Top from './pages/top';
import Setting from './pages/setting';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Top />} />
        <Route path="setting" element={<Setting />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

③これでトップ画面と設定画面ができたので、まずはURL移動でページ遷移してみます。

トップ画面:
http://localhost:3000
設定画面:
http://localhost:3000/setting

となります。どうでしょうか?無事開けたでしょうか?

 

ちなみに、Routeコンポーネントのpath属性の”/”はトップを表してます。elementはこのパスに対して表示するコンポーネントを定義してます。

 

実装例 リンク作成

折角なので、リンクも作成します。
react-router-domではLinkコンポーネントが用意されており、これでリンクを作成できるみたいです。このLinkコンポーネントのto属性に飛び先を指定してあげます。
今回はtop.jsでリンクを配置してみるので、以下のようにtop.jsを書き変えてみます。

// src\pages\top.js
import { Link } from "react-router-dom";

function Top() {
 return (
   <div>
     <h1>トップ画面</h1>
     <Link to="setting">setting画面へ</Link>
   </div>
  );
}

export default Top;

これでトップ画面に設定画面のリンクが作成できたと思います!試してみましょう。

 

まとめ

React.jsでのルーティングする方法としてはreact-router-domを使用して実装をしてみました。

参考になれば幸いです。


ともに考え、寄り添う。プロのデザインチームが即参戦。

販促ツールや一貫したデザインによるブランド構築などビジネスの成長をデザインの力で促進します。

NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。

企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

お得な情報がLINEに届く!!

LINE公式アカウントはこちらから。

友だち追加

最新記事

CONTACT

NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

平日10:00〜19:00

お電話の場合こちらから

043-305-4162

平日10:00〜19:00