Next.jsでsearch/[id]/pageからsearch/pageに戻ったさいに、もとの画面とは違う表示になっていたエラーを修正

はじめに

アプリ作成でsearch/[id]/pageからsearch/pageに戻ったさい、最初の画面と異なった結果が出力されていました。

問題

最初の画面
「詳細を見る」を押し画面遷移します

次の画面に遷移します

そこから戻るボタンを押します

問題点は1枚目の画像と異なるところでした。
これでは意味がないです。

ComeBackSearchButton

import Link from "next/link";

export function ComeBackSearchButton() {
    return (
        <div className="flex justify-center">
            <Link
                href={`/search`}
                className="w-44 rounded-md bg-gray-700 px-4 py-2 text-center text-white transition hover:bg-gray-800"
            >
                戻る
            </Link>
        </div>
    )
}

解決方法

戻るボタンの行き先が間違っていたことが原因でした。
具体的には検索条件を保持せずに遷移しているところです。

ComeBackSearchButton

import Link from "next/link";

export function ComeBackSearchButton({ query }: { query: string }) {
    return (
        <div className="flex justify-center">
            <Link
                href={`/search?${query}`}
                className="w-44 rounded-md bg-gray-700 px-4 py-2 text-center text-white transition hover:bg-gray-800"
            >
                戻る
            </Link>
        </div>
    )
}

現在
/search/2
|
↓
遷移
|
↓
/search
としていたのが原因でした。

修正後
/search/2?budget=50000&space=&color=
|
↓
戻る
|
↓
/search?budget=50000&space=&color=

としなければならなかったのです。
${query}を追加したことでも周りのコンポーネントを修正しています。

ここで追加したqueryとはURLSearchParamsで取得した内容を指しています。

const query = new URLSearchParams({
    budget: searchParams.budget ?? "",
    space: searchParams.space ?? "",
    color: searchParams.color ?? "",
}).toString();

おわりに

つぎにいきます。

参考文献