こんにちは！Nineeenという学生開発チームの代表をしている古谷洸樹ふるやこうきです。

今日はチームで開発しているShiftanでreact-rooter-domとMUIを用いて画面遷移ができるようになったので備忘録として残していきたいと思います。

Shiftanについて気になった方はこちらの記事を見てみてください。

react-router-domってなに？

react-router-domは複数のページがあるReactアプリケーションを構築する際に利用するライブラリです。このライブラリを使うとSPA（Single Page Application）のDOMをルーティング機能で書き換えることができます。

通常のWEBサーバーではページ全体のリロードを行いますが、Reactとreact-router-domを用いればJavaScriptでページ内の更新が必要な部分のみ更新を行うことができるので高速な画面遷移が期待できます。

では早速本題に入ります。

react-router-domのインストール

まずは、ターミナルを操作します。

// npmの場合
npm install react-router-dom

// yarnの場合
yarn add react-router-dom

どちらかでインストールが終わったらpacking.jsonを確認します。

バージョンが最新のv6以上のことを確認しましょう。

基本的な書き方

App.jsを開いてreact-router-domから必要なものをimportします。

import {BrowserRouter, Routes, Route} from 'react-router-dom';

まず、BrowserRouterで全体を囲います。
そしてその子要素としてRoutesやRouteがあります。
BrowserRouterは1プロジェクトに1回しか使えないので注意が必要です。

実際の私たちのApp.jsはこんな感じになりました。

import React from 'react';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import MiniDrawer from './components/store/Navbar';
import StoreHome from './components/store/StoreHome';
import MakeShift from './components/store/MakeShift';

function App() {
 return (
   <BrowserRouter>
     <>        
       <Routes>
         <Route path="/" element={<MiniDrawer contents={<StoreHome />}/>} />
         <Route path="home" element={<MiniDrawer contents={<MakeShift />}/>} />  
       </Routes>
     </>
   </BrowserRouter>
 );
}

export default App;

ここでは簡単にホーム画面からシフト作成画面にいくという画面遷移だけを例にとっています。
まず、Routeタグの中でpathを書きます。一番最初に表示したいものを/にして他は自由に決めてもらって構いません。

それではLogin.jsxを見てみましょう。
一般的にはreact-router-domのLinkをimportするのですが、今回はMUIを使っているので使用しません、と思っていたのですがこれは間違いのようです。
私たちは二つのルーティングの方法を見つけました。

1つ目のルーティング

私たちが最初に見つけたのはMUIのListItemタグにcomponent="a"とhref="/makeShift"を追加するだけです。

2つ目のルーティング

二つ目はreact-router-domのLinkをimportして使う方法です。
まず、Login.jsxでLinkをimportしようとしますがMUIのLinkとかぶってしまいます。なのでreact-router-domの方はRouterLinkとしてimportします。

import Link from '@mui/material/Link';
import { Link as RouterLink } from 'react-router-dom';

そしてListItemタグの中にcomponentでRouterLinkを指定し、toを書きます。

結果

実際に両方とも動かしてみたら明らかな違いがありました。
1つ目のhrefを使ったほうはレンダリングを行うと一度画面が白くなっていました。2つ目のRouterLinkを使ったほうはすべて白くなることはなく、こちらの方が早く画面描画をしていたように感じました。実際に動画でお見せしたいのですがnoteだと動画がアップロードできないみたいで残念です。

2つ目のルーティングを行うべきだと思いますが、問題点としてシフト作成の画面にいる状態でシフト作成のボタンを押すとURLがhttp://localhost:3000/makeShift/makeShift
という風になってしまいます。解決したいですが、これはまた別の機会に記事にしようと思います。

考察

探してみるとMUIの公式に答えがありました。

Routing libraries
By default, the navigation is performed with a native <a> element. You can customize it to use your own router. For instance, using Next.js's Link or react-router.

Global theme Link
In real-life applications, using a native <a> element is rarely enough. You can improve the user experience by using an enhanced Link component systematically. The theme of MUI allows configuring this component once.

ここに書いてあるように1つ目のhrefの方はただ<a>タグを使っているのと変わらず、react-rooter-domの恩恵を受けられていないことが分かります。

公式でも<a>タグを使うだけでは十分ではなく強化されたリンクコンポーネントを使用することでユーザーエクスペリエンスを向上させることができるようになると書いてあります。

終わりに

実は、ルーティングをチームで勉強していた時に1つ目の方法しか見つけておらず、これでルーティングを進めていく予定でした。
2つ目の方法はこのnoteを書きながら見つけたものです。もし、このnoteを書いていなかったら知らずに進んでしまっていたと思うとnote書いてよかったなと思いました。

自分たちの為に書いたものでわかりにくいかもですが、誰かの役に立てたらいいなと思います。

ぜひスキやコメントをしていただけると幸いです。

参考