Reactの各ページのルーティング方法

前の記事でトップページの変更方法を書いたので
こちらでは各ページへの遷移方法を書きます。

トップページ変更はこちら

プロジェクトの作成

まず作業の土台となるプロジェクトを作成します。

npx create-react-app プロジェクト名 
cd my-app

必要機能のインストール

下記の機能をインストールします

npm install react-router-dom

これで諸準備が整いました。

ルーティングの設定

トップページ変更に追記する形で書いています。⓵⓶⓷⓸を編集して対象となるAddTask.jsを作成することで完成です。
仕様:
リンク先:AddTask.js
ファイルの位置:App.jsと同じ
リンク名:add

基本的にApp.jsはトップページまたは各ルーティングの設定に使用されます。

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
// ⓵ルーティング機能を導入します
import HomePage from './HomePage';
import AddTask from './AddTask';
// ⓶対象となるページのコンポーネントを作成します

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<HomePage />} />
                <Route path="/add" element={<AddTask />} />
                {/* ⓷ルートを定義 */}
            </Routes>
        </Router>
    );
}

export default App;

HomePage.jsにaddへのリンクを作成してルーティングは終了です。

Homepage.js

import React from 'react';

function HomePage() {
    return (
        <div>
            <Link to="/add">Add Task</Link>
            {/* ⓸リンクを追加 toなのがポイントです */}
        </div>
    );
}

export default HomePage;

後はリンクの対象となるAddTask.jsを作成して完了です。

AddTask.js

import React from 'react';

function AddTask() {
    return (
        <div>
            <h1>タスクを追加</h1>
            <p>ここで新しいタスクを追加します。</p>
        </div>
    );
}

export default AddTask;