Next.js router.query返回undefined，动态传递artistName无法接收

我在CollectionItem.js组件中通过router.push动态传递artistName参数至app/artist/[artistId]/page.js组件，但在该页面组件中使用router.query解构获取artistName时返回undefined（参数已正常传递），希望在page.js中展示artistName。

相关代码 #

CollectionItem.js #

import Image from "next/image";
import { useRouter } from "next/navigation";

const CollectionItem = ({
    additionalImages,
    collectionName,
    artistImage,
    artistName,
}) => {
    const router = useRouter();

    const handleNavigation = artistName => {
        router.push(`/artist/${artistName}`);
    };

    return (
        <div>
            {additionalImages.slice(0, 1).map((additionalImage, index) => (
                <Image
                    key={index}
                    src={additionalImage}
                    alt="additionalImage"
                    className="w-full md:w-[330px]"
                />
            ))}
            <div className="flex items-center justify-between gap-[15px] mt-[15px]">
                {additionalImages.slice(1, 3).map((additionalImage, index) => (
                    <Image
                        key={index}
                        src={additionalImage}
                        alt="additionalImage"
                        className="w-[95px] md:w-[100px]"
                    />
                ))}
                <div
                    onClick={() => handleNavigation(artistName)}
                    className="flex items-center justify-center bg-[#202020] px-[15px] py-[32px]  w-[95px] md:w-[100px] h-[95px] md:h-[100px] rounded-sm cursor-pointer"
                >
                    <h1 className="text-[22px] font-bold text-[#fff]">
                        {additionalImages.length - 2}+
                    </h1>
                </div>
            </div>
            <div className="text-[#fff] mt-[15px]">
                <h1 className="font-semibold text-[22px]">{collectionName}</h1>
                <div className="flex items-center gap-[12px] mt-[10px]">
                    <Image src={artistImage} alt="artistImage" />
                    <h1>{artistName}</h1>
                </div>
            </div>
        </div>
    );
};

export default CollectionItem;

page.js #

"use client";
import { useRouter } from "next/navigation";

const ArtistPage = () => {
    const router = useRouter();
    const { artistName } = router.query;
    console.log(artistName);
    return <div className="text-[#ffffff]">Hello {}</div>;
};

export default ArtistPage;

解决方法 #

1. 修正路由参数名 #

你的动态路由文件命名为[artistId]/page.js，所以路由参数的键名是artistId，而非artistName。修改page.js中的解构逻辑：

"use client";
import { useRouter } from "next/navigation";

const ArtistPage = () => {
    const router = useRouter();
    const { artistId } = router.query;
    console.log(artistId);
    return <div className="text-[#ffffff]">Hello {artistId}</div>;
};

export default ArtistPage;

2. 处理路由参数加载延迟 #

在Next.js App Router的客户端组件中，router.query在组件初始挂载时可能为undefined，因为路由信息需要异步加载。可以通过以下两种方式解决：

方式一：条件渲染

"use client";
import { useRouter } from "next/navigation";

const ArtistPage = () => {
    const router = useRouter();
    const { artistId } = router.query;

    return <div className="text-[#ffffff]">Hello {artistId || "Loading..."}</div>;
};

export default ArtistPage;

方式二：useEffect监听路由变化

"use client";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

const ArtistPage = () => {
    const router = useRouter();
    const [artistName, setArtistName] = useState("");

    useEffect(() => {
        if (router.query?.artistId) {
            setArtistName(router.query.artistId);
        }
    }, [router.query]);

    return <div className="text-[#ffffff]">Hello {artistName}</div>;
};

export default ArtistPage;

内容的提问来源于stack exchange，提问作者Tamzid