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

当ページのリンクには広告が含まれています。
この記事で解決できる悩み
いずみ

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

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

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

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

いずみ

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

執筆者/監修者
  • フリーランスエンジニア(保有資格個)
  • ブログ・アフィリエイト歴5年
  • ブランドせどりで月利50万円⇨脱サラ
  • 投資歴5年(仮想通貨・FXが得意)
  • 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を使えば簡単に遷移元を確認できますね。

よくある質問

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

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

まとめ

今回は、Reactで遷移元のURLを取得する方法について解説しました。

以下が本記事のまとめになります。

まとめ
  • 遷移元のURLはHistoryContextで取得する。
まとめ♪
  • おすすめ本
¥2,673 (2023/07/24 11:20時点 | Amazon調べ)

Reactの勉強なら「」が分かりやすくておすすめですよ♪

いずみ

最後までお読みいただき、ありがとうございました!

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次