useNavigate

React

can do

画面遷移（遷移先に値を渡すこともできます）

戻るボタン（src > Contact.jsx）

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

const Contact = () => {
    const navigate = useNavigate();
    const clickBack = () => {
        navigate(-1);
    }
    return (
        <>
            <button onClick={clickBack}>戻る</button>
        </>
    );
}
export default Contact;

※useNavigateはRouteコンポーネントの内部でしか使えません。

App.jsで使おうとするとエラーになります

遷移先のページに値を渡す

navigate(to, { state = { ... }, replace=true })

to … 遷移先のURL

state … 遷移先で使用するstate

replace … trueを使うと、ブラウザの戻るボタンを使って以前のページに戻れなくなります

BACK