本文详解如何在 Next.js 应用中，利用 router.push 传递动态路由参数（如 /user/123 中的 123），并在目标页面（如 pages/user/[id].js）中安全、可靠地获取并使用该参数发起数据请求。
本文详解如何在 next.js 应用中，利用 `router.push` 传递动态路由参数（如 `/user/123` 中的 `123`），并在目标页面（如 `pages/user/[id].js`）中安全、可靠地获取并使用该参数发起数据请求。
在 Next.js 中，实现页面间参数传递与消费的核心机制是动态路由（Dynamic Routes） + useRouter Hook。你无需依赖 localStorage 或全局状态来中转 userId——Next.js 原生支持从 URL 路径中结构化提取参数，既简洁又符合服务端渲染（SSR）和静态生成（SSG）的最佳实践。
✅ 正确的路由配置与跳转方式
首先，确保你的目标页面路径遵循 Next.js 动态路由命名规范：
- 在 pages/user/[id].js（或 .tsx）下创建页面文件；
- 文件名中的 [id] 表示该段路径为动态参数，将自动映射为 router.query.id。
在源组件（如 PostCard）中，使用 router.push 进行带参跳转：
import { useRouter } from 'next/router';
import styles from './postcard.module.css';
const PostCard = ({ user }) => {
const router = useRouter();
return (
<div className={styles.post}>
<div
className={styles.userDetails}
onClick={() => {
// ✅ 正确：直接跳转至动态路由，URL 变为 /user/abc123
router.push(`/user/${user._id}`);
}}
>
View Profile
</div>
</div>
);
};
export default PostCard;⚠️ 注意：不要拼接查询参数（如 /user?id=...），也不应依赖 localStorage 存储临时 ID —— 这会破坏可分享链接、SSR 兼容性，并带来状态不一致风险。
✅ 在目标页面中安全获取并使用 id
在 pages/user/[id].js 中，使用 useRouter 获取路由参数，并注意处理 SSR/SSG 下的初始空值问题：
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
export default function UserDetail() {
const router = useRouter();
const { id } = router.query; // ✅ 动态参数在此处解构
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
// ✅ router.query.id 在客户端首次渲染时可能为 undefined（SSR 期间为空字符串或未定义）
if (!id) return;
const getUserData = async () => {
try {
setLoading(true);
// ✅ 使用从 URL 提取的 id，而非 localStorage 或硬编码
const res = await instance.get(`/user/${id}`);
setUser(res.data);
} catch (err) {
console.error('Failed to fetch user:', err);
} finally {
setLoading(false);
}
};
getUserData();
}, [id]); // ✅ 将 id 加入依赖数组，确保参数变更时重新请求
if (loading) return <div>Loading...</div>;
if (!user) return <div>User not found</div>;
return (
<div>
<h1>{user.name}</h1>
<p>ID: {user._id}</p>
</div>
);
}? 关键要点总结
- 路径即参数：/user/[id].js → 访问 /user/65a1b2c3 时，router.query.id === '65a1b2c3'；
- 服务端友好：router.query 在 getServerSideProps 或 getStaticProps 中也可通过 context.params.id 获取，支持预渲染；
- 类型安全建议（TypeScript）：可为 router.query 添加类型断言或使用 zod 校验，避免运行时错误；
- SEO 与可分享性：每个用户拥有独立、语义化 URL（如 /user/jane-doe），利于搜索引擎收录和用户直接分享；
- 避免反模式：不推荐用 localStorage、useState 跨页面传参，或通过 router.push(url, as) 隐藏真实路径——这会削弱 Next.js 的路由能力与调试体验。
掌握这一模式后，你可轻松扩展为多级动态路由（如 /user/[id]/posts/[postId]），构建高度可维护的 Next.js 应用架构。
