Next.js动态路由中Cookie值不独立的问题求解

Next.js 用 Link 做客户端导航时，动态路由组件不会重新挂载，你代码里的 Cookies.get('name') 只在组件首次渲染时执行一次，后续切换路由不会自动重新获取对应路径的 Cookie；另外直接在 JSX 里取 Cookie 值，不会触发组件重渲染，导致显示的始终是旧值。

核心思路 #

• 用状态存当前 Cookie 值，确保值变化时组件能自动重渲染
• 监听路由参数变化，每次切换博客页面都重新获取对应路径的 Cookie
• 设置 Cookie 时同步更新状态，实现即时显示

修改后的代码 #

// /blog/[blogId]
import Cookies from 'js-cookie';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';

function SingleBlog() {
    const router = useRouter();
    const { blogId } = router.query;
    const [currentCookie, setCurrentCookie] = useState(null);

    // 路由切换时重新获取当前页面的Cookie
    useEffect(() => {
        if (blogId) {
            // 明确指定路径，只拿当前博客页面的Cookie
            const targetCookie = Cookies.get('name', { path: `/blog/${blogId}` });
            setCurrentCookie(targetCookie);
        }
    }, [blogId]);

    const handleSetCookie = () => {
        const newCookieValue = `blog${blogId}`;
        Cookies.set('name', newCookieValue, { path: `/blog/${blogId}` });
        // 设置后直接更新状态，不用等刷新
        setCurrentCookie(newCookieValue);
    };

    return (
        <>
            <Link href={`/blog/${Number(blogId) + 1}`}> next blog </Link>
            <button onClick={handleSetCookie}> set </button>
            {currentCookie && <p>cookie : {currentCookie}</p>}
        </>
    )
}

export default dynamic(() => Promise.resolve(SingleBlog), { ssr: false });

关键说明 #

• 指定路径获取Cookie：调用 Cookies.get 时加上路径参数，避免误拿到其他博客页面的同名 Cookie
• 监听路由变化：通过 useEffect 监听 blogId 参数，每次切换页面都重新拉取对应路径的 Cookie
• 状态同步更新：设置 Cookie 后直接更新组件状态，不用刷新页面就能看到新值

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