遷移元のURLを取得するにはどうしたらいいですか？

Q: 遷移元のURLを取得するにはどうしたらいいですか？

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

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

2022年12月11日

悩んでいる人

Reactで遷移元のURLを取得したいんだけど、やり方が分からないんだよね…

こんな疑問にお答えします。

この記事で分かること

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

本記事の執筆者

プロフィール

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

いずみん

本記事を書いている僕はエンジニア歴7年です。
Reactは業務経験があるので、かなり有益な情報を発信できるかと思います。

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

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

いずみん

すぐ読み終わるので、是非最後まで読んでみてください！

遷移元の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を使えば簡単に遷移元を確認できますね。