初めに

Reactで単語帳アプリを作ろうと思ったら遷移元の画面に戻る処理でつまづいたので解決方法を残しておきます。

作りたい処理

画面は次の3つ

単語を一覧表示する画面
単語の詳細を確認する画面
単語を編集する画面

遷移図はこんな感じ

編集画面の戻るボタンを押したときの遷移先を一覧画面から遷移したのか詳細画面から遷移したのかで変えたかった。

解決方法

react-router-domのuseNavigate()の引数に-1を入れるだけで簡単に遷移元の画面に戻る処理ができた。
React Router v6からの仕様らしい(?)

sample.tsx

const navigate = useNavigate();
navigate(-1)

実際の画面が以下の通り
※画面遷移に関係ないところは省略してます

一覧画面

WordList.tsx

import { useNavigate } from "react-router-dom";

const WordList = () => {
    const navigate = useNavigate();

    // 詳細画面に遷移するボタン押下時処理
    const clickInfo = () => {
        navigate('/10');
    };

    // 編集画面に遷移するボタン押下時処理
    // /:id/editに遷移したいが便宜上/10/editに遷移
    const clickEdit = () => {
        navigate('/10/edit')
    }

    return (
        <>
            <h1>一覧画面</h1>
            <button onClick={clickInfo}>詳細</button>
            <button onclick={clickEdit}>編集</button>
        </>
    )
}

詳細画面

WordInfo.tsx

import { useNavigate } from "react-router-dom";

const WordList = () => {
    const navigate = useNavigate();

    // 一覧画面に遷移するボタン押下時処理
    const clickInfo = () => {
        navigate('/');
    };

    //編集画面に遷移するボタン押下時処理
    // /:id/editに遷移したいが便宜上/10/editに遷移
    const clickEdit = () => {
        navigate('/10/edit')
    }

    return (
        <>
            <h1>一覧画面</h1>
            <button onClick={clickList}>戻る</button>
            <button onclick={clickEdit}>編集</button>
        </>
    )
}

編集画面

WordInfo.tsx

import { useNavigate } from "react-router-dom";

const WordList = () => {
    const navigate = useNavigate();

    // 戻るボタン押下時処理
    const clickBack = () => {
        navigate(-1);
    };

    return (
        <>
            <h1>編集画面</h1>
            <button onClick={clickBack}>戻る</button>
        </>
    )
}

間違っているところや他の方法あれば教えてください！