本文详解在 Next.js 应用中，如何利用 router.push() 传递动态路由参数（如 /user/[id] 中的 id），并在目标页面中安全、可靠地读取该参数用于数据请求，避免硬编码或依赖 localStorage。
本文详解在 next.js 应用中，如何利用 `router.push()` 传递动态路由参数（如 `/user/[id]` 中的 `id`），并在目标页面中安全、可靠地读取该参数用于数据请求，避免硬编码或依赖 localstorage。
在 Next.js 中，实现页面间参数传递的核心机制是动态路由（Dynamic Routes）与路由查询对象（router.query）的配合。不同于 React Router 的 useParams，Next.js 基于文件系统路由，需将目标页面命名为 [id].js（或 [id].tsx）以启用动态段匹配，并通过 useRouter() 获取解析后的参数。
✅ 正确的路由定义与跳转方式
首先，确保你的用户详情页路径符合 Next.js 动态路由规范：
- 文件路径应为 pages/user/[id].js（对应访问路径 /user/123）
- 在 PostCard 组件中，直接跳转至带 ID 的路径即可（无需手动拼接 query 或 state）：
// components/PostCard.tsx
import { useRouter } from 'next/router';
const PostCard = ({ user }) => {
const router = useRouter();
return (
<div className="post">
<div
className="userDetails"
onClick={() => router.push(`/user/${user._id}`)}
>
查看用户详情
</div>
</div>
);
};
export default PostCard;⚠️ 注意：router.push() 的路径必须与 pages 目录下的文件结构严格对应；/user/123 会自动匹配 pages/user/[id].js，而非 pages/user/index.js。
✅ 在目标页面中安全读取路由参数
在 pages/user/[id].js 中，使用 useRouter() 获取 router.query.id。但需特别注意：router.query 初始值为空对象 {}，且在客户端渲染完成前不可用。因此，必须添加加载状态判断与条件执行逻辑：
// pages/user/[id].js
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import axios from 'axios'; // 替换为你的实例，如 instance
export default function UserDetail() {
const router = useRouter();
const { id } = router.query; // ✅ 此处 id 类型为 string | string[] | undefined
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// ✅ 仅当 id 存在且非空数组时发起请求
if (typeof id === 'string') {
const fetchUser = async () => {
try {
setLoading(true);
const res = await axios.get(`/api/user/${id}`); // 或你封装的 instance
setUser(res.data);
} catch (err) {
setError('用户加载失败');
console.error(err);
} finally {
setLoading(false);
}
};
fetchUser();
} else if (id === undefined) {
// 路由参数尚未解析（SSR 阶段或首次加载）
setLoading(true);
} else {
// id 是数组（极少见，如多级嵌套动态段），按需处理
setError('无效的用户 ID 格式');
setLoading(false);
}
}, [id]); // ✅ 依赖 id，确保参数变更时重新获取
if (loading) return <div>加载中...</div>;
if (error) return <div>{error}</div>;
if (!user) return <div>未找到用户</div>;
return (
<div className="user-profile">
<h1>{user.name}</h1>
<p>ID: {user._id}</p>
</div>
);
}? 关键注意事项总结
- 不要依赖 localStorage 覆盖路由参数：题中提到的 getUser() 从 localStorage 读取 ID，在跳转场景下应被 router.query.id 完全替代——这是更语义化、可预测且 SSR 友好的方式。
-
类型安全建议：若使用 TypeScript，可对 id 做类型断言或校验：
if (typeof id !== 'string' || !/^[0-9a-fA-F]{24}$/.test(id)) { return <div>无效用户 ID</div>; } -
服务端渲染兼容性：router.query 在 getServerSideProps 中不可用；如需 SSR 数据预取，请改用 context.params.id：
export async function getServerSideProps({ params }) { const { id } = params; const res = await fetch(`https://api.example.com/user/${id}`); const user = await res.json(); return { props: { user } }; } - SEO 与可访问性：动态路由生成的 URL（如 /user/abc123）天然支持搜索引擎索引和浏览器直连，优于 query-based（如 /user?id=abc123）或 state-based 传递。
通过以上方式，你不仅能精准传递 userId，还能构建出健壮、可维护、符合 Next.js 最佳实践的路由数据流。
