reactjs - Next 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>
    );```