😽

React Routerのルーティング実装

2024/01/16に公開

React

TypeScript

router

tech

はじめに

今回紹介するコードの完成形はこちら↓

開発環境

パッケージマネージャー：npm(volta)
バンドラー:Vite
react: 18.2.0
typescript: 5.2.2
react-dom: 18.2.0
react-router-dom: 6.21.2

React Routerとは

React Router は「クライアントサイドルーティング」を有効にします。

React単体にはルーティング機能はないので、いい感じにルーティングを作ってくれるものという認識で最初は大丈夫。

必要なパッケージのインストール

一旦ViteでReactの環境構築を行う。

npm create vite
npm i

環境構築の詳しい内容に関しては公式または下記記事を参照。

React Routerを追加する。

npm install react-router-dom

ルーティングの実装

コンポーネントの作成

ルーティングで使用する任意のコンポーネントを作成する。

Home.tsx

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

const Home = () => {
  return (
    <div>
      <div>Home</div>
      <Link to='/about'>About</Link>
    </div>
  )
}

export default Home;

About.tsx

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

const About = () => {
  return (
    <div>
      <div>About</div>
      <Link to='/'>Home</Link>
    </div>
  )
}

export default About;

ルーティングの設定

今回はルーティングの設定がわかりやすいように、コンポーネントを切り分けて作成する。
設定は簡単で下記のようにコードを書けば、BrowserRouterがブラウザ内蔵の履歴スタックを使ってルーティングを作成してくれて、/と/aboutの2個のパスが使用可能になる。

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import AppRoutes from './react-router/AppRoutes.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <AppRoutes />
  </React.StrictMode>,
)

AppRoutes.tsx

import {
  BrowserRouter,
  Route,
  Routes
} from "react-router-dom";
import Home from './Home';
import About from './About';

const AppRoutes = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </BrowserRouter>
  )
}

export default AppRoutes;

[補足]ロジックの切り分け

サンプルコードだと、/と/aboutの2個しかパスがないので可読性に問題はないが、パスが100個とかになると可読性が悪くなってしまう。その対策として、pathとelementを変数として切り分ける。

const routes = [
  {
    path: '/',
    Component: Home
  },
  {
    path: '/about',
    Component: About
  },
] as const satisfies RouteProps[];

※as const satisfiesがわからない方はこちらを参照

切り分けた変数をループで回して処理する。

<Routes>
  {routes.map(({ path, Component }, i) => <Route key={i} path={path} element={<Component />} />)}
</Routes>

完成コード

import {
  BrowserRouter,
  Route,
  Routes,
  type RouteProps,
} from "react-router-dom";
import Home from './Home';
import About from './About';

const routes = [
  {
    path: '/',
    Component: Home
  },
  {
    path: '/about',
    Component: About
  },
] as const satisfies RouteProps[];

const AppRoutes = () => {
  return (
    <BrowserRouter>
      <Routes>
        {routes.map(({ path, Component }, i) => <Route key={i} path={path} element={<Component />} />)}
      </Routes>
    </BrowserRouter>
  )
}

export default AppRoutes;

以上！