NextJS 13（Pages Router）路由传参刷新丢失问题及优化咨询

一、解决刷新后username丢失的问题 #

你当前通过router.push的第二个参数隐藏了URL中的username，但刷新页面时，浏览器会直接请求干净的URL，导致router.query中没有username参数。以下是两种可行的解决方案：

方案1：用localStorage持久化用户名 #

适合纯客户端场景，跳转时将用户名存入本地存储，进入页面后读取：

修改JoinRoom.tsx的joinHandler：

const joinHandler = (e: React.FormEvent) => {
    e.preventDefault();
    if (!roomId || !username) {
        alert('Please fill in the required fields');
        return;
    }
    // 按房间ID存储用户名，避免不同房间冲突
    localStorage.setItem(`room_${roomId}_username`, username);
    router.push(`/editor/${roomId}`);
};

修改[roomid].tsx：

import { useState, useEffect } from "react";
import { useRouter } from "next/router";

interface RoomIDProps {
  roomid?: string;
}

const Editor = (props: RoomIDProps) => {
    const router = useRouter();
    const roomid = props.roomid || router.query.roomid as string;
    const [username, setUsername] = useState<string | null>(null);

    useEffect(() => {
        if (roomid) {
            const storedUsername = localStorage.getItem(`room_${roomid}_username`);
            if (storedUsername) {
                setUsername(storedUsername);
            } else {
                // 刷新后无存储的用户名，跳转回房间加入页
                router.push("/join-room");
            }
        }
    }, [roomid, router]);

    if (!username) {
        return <div>Loading...</div>;
    }

    return (
        <>
            <p>Room ID: {roomid}</p>
            <p>Username: {username}</p>
        </>
    );
};

// 如果不需要静态生成，可以删除getStaticPaths和getStaticProps
export default Editor;

方案2：用router.state传递（临时会话） #

适合不需要持久化的场景，刷新后数据会丢失，需处理跳转回加入页：

修改JoinRoom.tsx的joinHandler：

const joinHandler = (e: React.FormEvent) => {
    e.preventDefault();
    if (!roomId || !username) {
        alert('Please fill in the required fields');
        return;
    }
    router.push(`/editor/${roomId}`, undefined, {
        state: { username }
    });
};

修改[roomid].tsx：

import { useEffect } from "react";
import { useRouter } from "next/router";

const Editor = () => {
    const router = useRouter();
    const { roomid } = router.query;
    const username = router.state?.username as string;

    useEffect(() => {
        // 刷新后router.state为空，跳转回加入页
        if (!username) {
            router.push("/join-room");
        }
    }, [username, router]);

    if (!username) {
        return <div>Loading...</div>;
    }

    return (
        <>
            <p>Room ID: {roomid}</p>
            <p>Username: {username}</p>
        </>
    );
};

export default Editor;

二、解释getStaticPaths和getStaticProps的作用 #

这两个是Next.js Pages Router中**静态生成（SSG）**的核心函数，用于预渲染动态路由页面：

1. getStaticPaths #

用于告诉Next.js，哪些动态路由参数对应的页面需要在构建时预渲染成静态HTML文件。返回值结构：

• paths：数组，定义要预渲染的路径参数，比如你代码中预渲染了/editor/test；
• fallback：控制未预渲染路径的处理逻辑：
  • true：未预渲染的路径会在第一次请求时生成静态页面并缓存；
  • false：未预渲染的路径直接返回404；
  • blocking：未预渲染的路径在服务器端实时生成后返回，之后缓存。

2. getStaticProps #

用于在构建时获取数据，将数据作为props传递给页面组件。context参数包含动态路由的params、预览模式等信息，你代码中是把roomid作为props传给组件，但组件未使用。

针对你的场景的优化 #

你的roomid是随机生成的（nanoid），无法提前预知所有可能的参数值，因此静态生成意义不大。建议：

• 删除getStaticPaths和getStaticProps，直接用客户端路由获取roomid；
• 如果需要服务端获取房间数据，改用getServerSideProps（每次请求在服务器端处理）。

三、开发最佳实践 #

1. 参数传递：

   • 需持久化的参数优先用localStorage/sessionStorage或cookie，避免依赖router.query传递非URL参数；
   • router.state仅适合临时跳转传递数据，不要用于需要保留到刷新后的数据。

2. 数据获取函数选择：

   • 预可知的动态路由（如博客文章slug）用getStaticPaths + getStaticProps做静态生成，提升加载性能；
   • 动态生成、不可预知的路由参数（如随机roomid），用客户端渲染或getServerSideProps；
   • 不要盲目使用AI生成的代码，需结合业务场景选择合适的方案。

3. 页面渲染稳定性：

   • 处理router.query的undefined状态，添加loading或错误提示，避免渲染崩溃；
   • 优先使用getStaticProps/getServerSideProps传递的props，比router.query更可靠（路由解析完成前router.query可能为空）。

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