react-router-domを使ってページ遷移を実装する

前提

この記事はTypescript、React初学者の私が、実装を通して学習したことをまとめたものです。今回はページ遷移を実装するにあたって個人的に楽だなと感じた実装方法をまとめます。

勉強中ですので、認識の誤りがありましたら、コメントで指摘していただけると幸いです。！

いいねを貰うととても喜びます

ルーティング、ナビゲーションってなに？

まずは、ページ遷移について調べると必ず出てくる、ルーティングとナビゲーションについて説明します。

ルーティング：URLとWebアプリの特定の部分を関連付ける仕組み
ナビゲーション：ユーザがwebサイトを移動する仕組み

react-router-domは、React開発における、ルーティングに必要な機能が揃ったライブラリになっています。

開発環境

• @types/react-router-dom 5.3.3

ディレクトリ構成

src/
├── components/
├── pages/
│   ├── about.tsx
│   └── contact.tsx
├── routes/
│   └── AppRoutes.tsx
├── App.tsx
└── index.tsx

ルーティングの実装

1.パッケージのインストール

確認はしてませんが、npmでも問題ないかと思います。

yarn add react-router-dom 

2.ルーティングの実装

ルーティングの管理はRoutes.tsxでのみ行います。各ファイルからimportしたものについて、pathを割り当てていきます。

この時、ホームの画面にしたいものをpath="/"とし、ルートパスを割り当てます。

<Route>の順番はルーティングに影響しませんが、可読性のためにルートパスを一番上に持ってくると良いみたいです。

AppRoutes.tsx

import { Routes,Route } from "react-router-dom";
import App from '../App';
import About from '../pages/About';
import Contact from '../pages/Contact';

const AppRoutes = () => { 
    return(
        <Routes>
          <Route path="/" element={<App />} /> 
          <Route path="/about" element={<About />} />  
          <Route path="/contact" element={<Contact/>}/>
        </Routes>    
    )
}

export default AppRoutes;

3.レンダリングする部分をラップする

Routes.tsxからエクスポートされたAppRoutesについて、同ライブラリの<BrowserRouter>でラップしたものがレンダリングされるように設定します。

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import AppRoutes  from './routes/Routes';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <BrowserRouter> {/*ラップ！！*/}
      <AppRoutes/>{/*Routes.tsxのdefault export*/}
    </BrowserRouter>
  </React.StrictMode>
);

ナビゲーションの実装

<Link>を使うことで、ナビゲーションを容易に実装することができます。設定した各パスは絶対パスとして扱われ、どのページからでもアクセスすることができます。

相対パスの使用は非推奨

トップページからの移動

App.tsx

import React from 'react'
import {Link} from 'react-router-dom'

function App(){
    return(
        <>
            <h1>home</h1>
            <Link to='/about'>about</Link>
            <Link to='/contact'>contact</Link>
        </>
    )
}

export default App

子ページから親ページに戻る

about.tsx

import React from 'react'
import {Link} from 'react-router-dom'

function About(){
    return(
        <>
            <h1>about</h1>
            <Link to='/'>back</Link>            
        </>
    )
}

export default About

子ページ間の移動

contact.tsx

import React from 'react'
import {Link} from 'react-router-dom'

function Contact(){
    return(
        <>
            <h1>contact</h1>
            <Link to='/about'>see about</Link>        
        </>
    )
}

export default Contact

まとめ

以上になります。読んでいただきありがとうございます！

思いのほか直感的な実装ができて、Reactに対する心の壁がなくなってきました。

また、Routes/AppRoutes.tsxの新しい作成は不要かな？と執筆中に思ってきたため、慣習上どうするべきなのかをコメントでご教授いただけるとありがたいです。

その他の指摘もお待ちしております。

参考資料