【React】react-router-domライブラリを使用したルーティングの設定｜ポートフォリオサイトの作り方
作成日: 更新日:
開発環境
- Visual Studio Code:version 1.73.0
- OS:Windows10
- Node.js:v18.14.0
- npm:9.3.1
- react:18.2.0
- react-dom:18.2.0
- react-router-dom:6.8.2
- typescript:4.9.5
- mui:5.11.10
Reactでルーティングを設定するまでの手順
Reactアプリケーションでルーティングを設定するまでの手順は、以下の手順を実行する必要があります。
react-router-domライブラリのインストール
まずはreact-router-domライブラリのパッケージを以下のコマンドでインストールします。
1npm install react-router-dom
今回は最新バージョンであるV6をインストールします。
react-router-domのBrowserRouteで全体をラップする
次にreact-router-domライブラリのBrowserRouterコンポーネントを使用し、アプリケーション全体をラップします。
1// react-portfolio-app/src/index.tsx 2import React from 'react'; 3import ReactDOM from 'react-dom/client'; 4import './index.css'; 5import App from './App'; 6import reportWebVitals from './reportWebVitals'; 7import { BrowserRouter } from 'react-router-dom'; 8 9const root = ReactDOM.createRoot( 10 document.getElementById('root') as HTMLElement 11); 12root.render( 13 <React.StrictMode> 14 <BrowserRouter> 15 <App /> 16 </BrowserRouter> 17 </React.StrictMode> 18); 19 20// If you want to start measuring performance in your app, pass a function 21// to log results (for example: reportWebVitals(console.log)) 22// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 23reportWebVitals();
このコンポーネントは、HTML5履歴APIを使用してURLを制御します。 また、「BrowserRouter」は、Reactプロジェクトの中で一度しか使えません。
react-router-domでルーティングを設定
次にreact-router-domでルーティングの画面遷移を設定します。
1// react-portfolio-app/src/App.tsx 2import React from "react"; 3import { Routes, Route, Link } from "react-router-dom"; 4 5import Top from "./pages/homes/top"; 6import Profile from "./pages/homes/profile"; 7import Skill from "./pages/homes/skill"; 8import Production from "./pages/homes/production"; 9import Contact from "./pages/homes/contact"; 10import Blog from "./pages/homes/blog"; 11import NoMatch from "./pages/nomatch"; 12 13const App: React.FC = () => { 14 return( 15 <> 16 <h1>ポートフォリオサイト</h1> 17 <ul> 18 <li><Link to="/">Top</Link></li> 19 <li><Link to="/profile">Profile</Link></li> 20 <li><Link to="/skill">Skill</Link></li> 21 <li><Link to="/production">Production</Link></li> 22 <li><Link to="/contact">Contact</Link></li> 23 <li><Link to="/blog">Blog</Link></li> 24 </ul> 25 <Routes> 26 <Route path="/" element={<Top />} /> 27 <Route path="/profile" element={<Profile />} /> 28 <Route path="/skill" element={<Skill />} /> 29 <Route path="/production" element={<Production />} /> 30 <Route path="/contact" element={<Contact />} /> 31 <Route path="/blog" element={<Blog />} /> 32 <Route path="*" element={<NoMatch />} /> 33 </Routes> 34 <h2>フッター</h2> 35 </> 36 ); 37}; 38 39export default App;
react-router-domのV5までは「Switch」を使用していましたが、V6からは「Routes」を使用して各ルートのコンポーネントを設定します。 「Routes」コンポーネントは子である「Routes」コンポーネントを検証し、URLパスに一致する最初のコンポーネントだけをレンダリングします。
Reactの画面遷移で使用するコンポーネント
次にReactの画面遷移で使用するコンポーネントを作成していきます。
1// react-portfolio-app/src/pages/homes/top.tsx 2import React from "react"; 3 4const Top: React.FC = () => { 5 return( 6 <> 7 <h2>トップページ</h2> 8 </> 9 ); 10}; 11 12export default Top;
srcのpagesのフォルダ内にhomesというフォルダを作成し、トップページ用の「top.tsx」ファイルを作成しています。 今回はにファイルを作成しているだけですが、ご参考のために各ファイルのコードを記載しておきます。
1// react-portfolio-app/src/pages/homes/profile.tsx 2import React from "react"; 3 4const Profile: React.FC = () => { 5 return( 6 <> 7 <h2>プロフィールページ</h2> 8 </> 9 ); 10}; 11 12export default Profile;
1// react-portfolio-app/src/pages/homes/skill.tsx 2import React from "react"; 3 4const Skill: React.FC = () => { 5 return( 6 <> 7 <h2>開発スキルページ</h2> 8 </> 9 ); 10}; 11 12export default Skill;
1// react-portfolio-app/src/pages/homes/production.tsx 2import React from "react"; 3 4const Production: React.FC = () => { 5 return( 6 <> 7 <h2>制作物ページ</h2> 8 </> 9 ); 10}; 11 12export default Production;
1// react-portfolio-app/src/pages/homes/contact.tsx 2import React from "react"; 3 4const Contact: React.FC = () => { 5 return( 6 <> 7 <h2>お問い合わせページ</h2> 8 </> 9 ); 10}; 11 12export default Contact;
1// react-portfolio-app/src/pages/homes/blog.tsx 2import React from "react"; 3 4const Blog: React.FC = () => { 5 return( 6 <> 7 <h2>ブログページ</h2> 8 </> 9 ); 10}; 11 12export default Blog;
私はブログを運営しているため、とりあずはブログのコンポーネントも作成しています。
Reactのルーティングで404を設定
次にReactのルーティングで404を設定していきます。
1// react-portfolio-app/src/App.tsx 2import React from "react"; 3import { Routes, Route, Link } from "react-router-dom"; 4 5import Top from "./pages/homes/top"; 6import Profile from "./pages/homes/profile"; 7import Skill from "./pages/homes/skill"; 8import Production from "./pages/homes/production"; 9import Contact from "./pages/homes/contact"; 10import Blog from "./pages/homes/blog"; 11+ import NoMatch from "./pages/nomatch"; 12 13const App: React.FC = () => { 14 return( 15 <> 16 <h1>ポートフォリオサイト</h1> 17 <ul> 18 <li><Link to="/">Top</Link></li> 19 <li><Link to="/profile">Profile</Link></li> 20 <li><Link to="/skill">Skill</Link></li> 21 <li><Link to="/production">Production</Link></li> 22 <li><Link to="/contact">Contact</Link></li> 23 <li><Link to="/blog">Blog</Link></li> 24 </ul> 25 <Routes> 26 <Route path="/" element={<Top />} /> 27 <Route path="/profile" element={<Profile />} /> 28 <Route path="/skill" element={<Skill />} /> 29 <Route path="/production" element={<Production />} /> 30 <Route path="/contact" element={<Contact />} /> 31 <Route path="/blog" element={<Blog />} /> 32+ <Route path="*" element={<NoMatch />} /> 33 </Routes> 34 <h2>フッター</h2> 35 </> 36 ); 37}; 38 39export default App;
31行目の記載が、どのURLにも該当しない場合にNoMatchというコンポーネントを返すというルーティング設定になります。
1// react-portfolio-app/src/pages/nomatch.tsx 2import React from "react"; 3 4const NoMatch: React.FC = () => { 5 return( 6 <> 7 <h2>ページが見つかりませんでした。</h2> 8 </> 9 ); 10}; 11 12export default NoMatch;
上記はどのURLにも該当しない場合に返すコンポーネントなので、「ページが見つかりませんでした」という内容を返すコンポーネントです。 以上でReactの基本的なルーティング設定は完了です。
おわりに
Reactでルーティングの設定をするための手順を解説してきましたが、いかがだったでしょうか。 react-router-domのパッケージを使用すれば、簡単にルーティングを設定して効率よく画面偏移をすることができるのが、SPAの利点でもあります。 是非、モダンなフロントエンド開発の定番となりつつあるReactを使っていきましょう。