如何在 Next.js 中通过路由跳转传递并获取动态参数（如 userId）

本文详解在 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 最佳实践的路由数据流。