この記事で解決できる悩み
いずみ
こんな悩みを解決できる記事を書きました!
僕は現役フリーランスエンジニア(歴8年)で、資格は13個保有しています。
結論、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を使えば簡単に遷移元を確認できますね。
よくある質問
遷移元のURLを取得するにはどうしたらいいですか?
HistoryContextを使えば遷移元のURLを取得できます。
まとめ
今回は、Reactで遷移元のURLを取得する方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Reactの勉強なら「React.js&Next.js超入門 第2版
最後までお読みいただき、ありがとうございました!
- クソおすすめ本
海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。