reactjs - 次のjsでページを更新するとクエリ値が失われますか?

Question

Next.Jsでブログ詳細ページを作っています

カードからリンクをクリックすると、 を使用してブログの詳細に移動しqueryます。query values渡された詳細ページも受け取ります。しかし、詳細ページを更新すると、クエリが失われます。

カードページ

<Link href='/recipes/[id]' as={`/recipes/${recipe.strMeal}`} key={recipe.strMeal} passHref>

詳細ページ

    
    const { query } = useRouter();
    const id = query.id


    const [recipes, setRecipes] = useState([]);
    const [isFetchingData, setIsFetchingData] = useState(true);

    const getRecipesList = async () => {
        try {
        const { meals } = await getRecipes(id);
        setIsFetchingData(false);
        setRecipes(meals ?? []);
        } catch (e) {
        setIsFetchingData(false);
        console.error(e);
        }
    }
    useEffect(() => {
        getRecipesList();
    }, [])

    return (
        <div>
            <h1>
                {recipes.map((recipe, index) => {return(<div key={index}> <li>{recipe.strMeal}</li></div>)})}
            </h1>
        </div>
    );```