ReactのuseLocationとは？

useLocationとは

React Router（v6以降）で使えるフックです。
現在のURLの情報（パス名・クエリ・ステートなど）を取得するために使います。

基本構文

基本的な形は以下のような形になります。

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

const location = useLocation();

UseNavigateとの違い

useNavigateは画面遷移です。
ここが違います。現在のURL情報を取得するのがuseLocationです。

実際に使った事例

セイト先生のReact動画で学んでいる時に、遭遇しました。ソースコードは一部抜粋します。

useLocationでデータを受け取るには、クイズ結果を遷移時にstateに渡して送る必要があります。以下に、送信側と受信側の両方のコードを出します。

• 受信側

import { Link,useLocation } from 'react-router-dom'
import { ROUTES } from '../../const'
import Result from '../../components/Result/Result'

export default function ResultPage () {
    const location = useLocation();
    const maxQuizLen = location.state.maxQuizLen;
    const correctNumLen = location.state.correctNumLen;
    return (
        <>
            <h1>結果発表</h1>
            <Result maxQuizLen = {maxQuizLen} correctNumLen = {correctNumLen}/>
            <br/>
            <Link to={ROUTES.QUIZ}>もう一度クイズに挑戦</Link>
            <br/>
            <Link to={ROUTES.HOME}>トップページへ戻る</Link>
        </>
    )
}

• 送信側

import { useNavigate } from 'react-router-dom';
import { ROUTES } from '../../const';

function QuizEndComponent({ maxQuizLen, correctNumLen }) {
    const navigate = useNavigate();

    const handleFinish = () => {
        navigate(ROUTES.RESULT, {
            state: {
                maxQuizLen,
                correctNumLen
            }
        });
    };

    return (
        <button onClick={handleFinish}>結果を見る</button>
    );
}

セイト先生の動画で解説

よかったらセイト先生のReact講座でも扱っているので、見てみてください。

【2025年最新】世界一簡単なReact講座！JavaScript初心者・中級者は必見

参考資料

ChatGPT