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

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

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

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

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

ルーティング：**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でも問題ないかと思います。
```terminal
yarn add react-router-dom 
```

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

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


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

```tsx: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>`でラップしたものがレンダリングされるように設定します。
```tsx: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>`を使うことで、ナビゲーションを容易に実装することができます。設定した各パスは**絶対パス**として扱われ、どのページからでもアクセスすることができます。

::: note warn
相対パスの使用は非推奨
:::
###  トップページからの移動
```tsx: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
```
### 子ページから親ページに戻る
```tsx: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
```

### 子ページ間の移動
```tsx: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の新しい作成は不要かな？と執筆中に思ってきたため、慣習上どうするべきなのかをコメントでご教授いただけるとありがたいです。

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


## 参考資料
https://qiita.com/TMDM/items/0939ff52ab5b459303d7

https://qiita.com/kimascript/items/6a8d5321ce8f86d66ff2

https://reactrouter.com/en/main/start/tutorial

https://qiita.com/ShoChanHobby/items/c4e2c2b9bb510be2efe8