[React][初学者向け]react-router-domで画面遷移をさせる方法

23新卒プログラング未経験の釣り人Shochanです。

業務でFEの実装に携わり、プライベートでJavaScript,TypeScript,Reactを勉強するようになりましたので、勉強していく中で学んだこと、気づきなどを書いていきます。

今回の記事はreact-router-domで画面遷移をさせる方法です。
改善できるところ、誤り、アドバイス等ございましたら、コメントにて書いていただけると嬉しいです。

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

Reactを導入しているディレクトリにて以下のコマンドを実行し、react-router-domのインストールを行いましょう。

ターミナル

npm install react-router-dom

index.tsxを変更

src/index.tsxを以下のように変更します。
react-router-domパッケージのBrowserRouterを使用するのでインポートしましょう。
BrowserRouterタグでルーティングを設定するコンポーネント（AppRoutes）を囲ってあげます。

index.tsx

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { AppRoutes } from './Routes';
import { BrowserRouter } from 'react-router-dom' // 追加する

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>
  </React.StrictMode>
);

自分はルーティングの設定用のコンポーネントを作り、そこでルーティングの設定をしています。
以下にルーティング用のコンポーネントについて記載します。

ルーティングの設定をする

srcの下にRoutes.tsxを作成しルーティングの設定をします。
今回はHome,Form,Viewの3つの画面を自由に画面遷移させるようにしていきます。
react-router-domパッケージのRoutesとRouteを使用するのでインポートします。
その下に、画面遷移させたいコンポーネントをインポートします。srcの下にHome.tsx、srcの下にcomponentsというディレクトリーを作成し、その下にForm.tsx、View.tsxを作成しています。

Routes.tsx

// src/Routes.tsx
import { Routes, Route } from "react-router-dom";
import Home from "./Home"
import Form from "./components/Form"
import View from "./components/View"

export const AppRoutes = () => {
    return (
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/form" element={<Form />} />
            <Route path="/view" element={<View />} />
        </Routes>
    )
}

<Route path="/" element={<Home />} />

上記の記述は「 / 」にアクセスすると、Homeコンポーネントが表示されるというものになります。
同様に「/form」にアクセスすると、Formコンポーネント、「/view」にアクセスすると、Viewコンポーネントが表示されることになります。

今回は例として、「投稿画面へ」ボタンを押下するとForm画面、「表示画面へ」ボタンを押下するとView画面へ画面遷移するものを書いてみます。
画面遷移をさせる際にはreact-router-domのuseNavigate関数を使用する必要があるためインポートします。

Home.tsx

// src/Home.tsx
import { useNavigate } from "react-router-dom";

const Home = () => {
    const navigate = useNavigate()
    const handleForm = () => {
        navigate('/Form')
    }
    const handleView = () => {
        navigate('/View')
    }
    return (
        <>
            <button onClick={handleForm}>投稿画面へ</button>
            <br />
            <button onClick={handleView}>表示画面へ</button>
        </>
    )
}
export default Home;

画面遷移させるために以下のように書きます。

const navigate = useNavigate()

「投稿画面へ」ボタンを押下した時にイベントhandleForm(関数名は好ましくない)を呼び、そこで画面遷移させる処理を書きます。

const handleForm = () => {
        navigate('/Form')
    }

navigateの引数にRoutes.tsxで設定したルーティングを指定することで、任意の画面に遷移できる。

画面遷移先のコンポーネントは以下に記載しておきます。
こちらの画面にそれぞれ遷移することになります。

Form.tsx

// src/components/Form.tsx
const Form = () => {
    return (
        <>
            <h1>Form</h1>
        </>
    )
} 
export default Form;

View.tsx

// src/components/View.tsx
const View = () => {
    return (
        <>
            <h1>View</h1>
        </>
    )
} 
export default View;

実際の画面

投稿画面を押下すると、以下の画面に遷移される。

表示画面を押下すると、以下の画面に遷移される。

終わりに

以上がreact-router-domで画面遷移をさせる方法でした。
react-router-domを使用することで初心者でも比較的簡単に画面遷移させることができますので、ぜひお試しください。