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

悩んでいる人

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

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

この記事で分かること
  • 本記事の執筆者
プロフィール
  • フリーランスエンジニア(保有資格約20個)
  • ブログ・アフィリエイト歴5年
  • ブランドせどりで月利50万円⇨脱サラ
  • Twitterフォロワー約2,000人
いずみん

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

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

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

いずみん

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

\ 年収が2倍に?! /

目次

遷移元の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を取得する方法

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

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

まとめ|遷移元のURLはHistoryContextで取得しよう

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

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

まとめ
  • 遷移元のURLはHistoryContextで取得する。

この記事があなたのお役に立てば幸いです。

サイト内には、他にも初心者向けの記事を多く投稿していますので良ければ参考にしてみてください。

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

最後に

僕が個人的におすすめするReactエンジニア向けのフリーランスエージェントをご紹介します。

いずみん

エンジニアで実務経験のある方(目安は3年)はフリーランスも視野に入れましょう。

僕自身、フリーランスになって収入が2倍(年収+280万)になりました。

あなたの貴重なスキルを安売りしないようにしましょうね!

初めてのフリーランスなら「レバテックフリーランス」

総合評価案件数(公開)面談
約40,000件無料
マージン率単価アフターフォロー
10〜20%あり
Good Point
  • 国内最大級のフリーランスエージェント
  • 案件数は約40,000件(国内最多)
  • 高単価案件が豊富
  • マージン率は10〜20%

は国内最大級のフリーランスエージェントです。

高単価案件が豊富で、初めてフリーランスになる方におすすめのエージェントです。

いずみん

僕も最初はレバテックを利用しましたが、おかげさまで収入が約1.5倍になりました(笑)。

正社員並みの保証なら「Midworks(ミッドワークス)」

総合評価案件数(公開)面談
約3,000件以上無料
マージン率単価保証
非公開
Good Point
  • 正社員並みの手厚い保証
  • 給与保証あり
  • 非公開案件が豊富
  • マージン率は一律20%

正社員並みの手厚い保証を受けたい方におすすめのエージェントです。

非公開案件が豊富で給与保証も付いているので、安心してフリーランスにチャレンジできますよ!

いずみん

ちなみに僕はMidworks経由でフルリモート案件に参画できました!
営業担当の方も真摯に対応してくれて非常に助かりました。

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

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