【React/Next.js】遷移元のURLを取得する方法！

2023年7月29日

当ページのリンクには広告が含まれています。

この記事で解決できる悩み

遷移元のURLを取得する方法は？

いずみ

こんな悩みを解決できる記事を書きました！

僕は現役フリーランスエンジニア（歴8年）で、資格は13個保有しています。

結論、HistoryContextを使えば遷移元のURLを取得できます。

本記事を読んでもらえれば、Reactで遷移元のURLを取得する方法が理解できるので早速見ていきましょう！

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいね♪

執筆者／監修者

フリーランスエンジニア（保有資格13個）
ブログ・アフィリエイト歴5年
ブランドせどりで月利50万円⇨脱サラ
Twitterフォロワー約2,000人

いずみです

遷移元のURLを取得する方法

では早速、遷移元のURLを取得する方法を解説します。

STEP

HistoryContextを作成

import { createContext } from 'react';

export const HistoryContext = createContext<string[]>(['', '']);

HistoryContextを作成します。

STEP

親コンポーネントにHistoryContextを定義

import { useEffect, useState } from 'react';
import { HistoryContext } from 'hooks';
import type { AppProps } from 'next/app';
import { useRouter } from 'next/router';

const App = ({ Component, pageProps }: AppProps) => {
  const router = useRouter();
  const [history, setHistory] = useState([router.asPath, '']);

  useEffect(() => {
    setHistory([router.asPath, history[0]]);
  }, [router.asPath]);

  return (
    <HistoryContext.Provider value={history}>
      <UnchiComponent />
    </HistoryContext.Provider>
  );
};

export default App;

親コンポーネントにHistoryContextを定義します。

STEP

遷移元の確認

import { useContext, useEffect } from 'react';
import { HistoryContext } from 'hooks/historyContext';

export const UnchiComponent = () => {
  const history = useContext(HistoryContext);

  useEffect(() => {
    // 遷移元URLのパスが「/unchi/」の場合
    if (history[0] === '/unchi/') {
      console.log('うんち爆弾！！！')
    }
  }, []);

  return (
    <></>
  )
};

「history[0]」に遷移元URLのパスが含まれています。

いずみ

HistoryContextを使えば簡単に遷移元を確認できますね。