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


Reactで遷移元のURLを取得したいんだけど、やり方が分からないんだよね…
こんな疑問にお答えします。
- 本記事の執筆者
本記事を書いている僕はエンジニア歴7年です。
Reactは業務経験があるので、かなり有益な情報を発信できるかと思います。
結論、HistoryContextを使えば遷移元のURLを取得できます。


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



すぐ読み終わるので、是非最後まで読んでみてください!
\ 年収が2倍に?! /
遷移元のURLを取得する方法
では早速、遷移元のURLを取得する方法を解説します。
import { createContext } from 'react';
export const HistoryContext = createContext<string[]>(['', '']);
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を定義します。
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%
レバテックフリーランスは国内最大級のフリーランスエージェントです。
高単価案件が豊富で、初めてフリーランスになる方におすすめのエージェントです。



僕も最初はレバテックを利用しましたが、おかげさまで収入が約1.5倍になりました(笑)。
正社員並みの保証なら「Midworks(ミッドワークス)」
- 正社員並みの手厚い保証
- 給与保証あり
- 非公開案件が豊富
- マージン率は一律20%
Midworksは正社員並みの手厚い保証を受けたい方におすすめのエージェントです。
非公開案件が豊富で給与保証も付いているので、安心してフリーランスにチャレンジできますよ!



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