Next.js路由传参与获取方法详解

本文深入解析了 Next.js 中动态路由参数传递与获取的完整实践路径，涵盖如何通过 `router.push()` 正确跳转至如 `/user/[id]` 这类动态路由页面，并在目标页中安全、可靠地读取 `router.query.id`，同时处理加载状态、类型校验、错误边界及 SSR 兼容性等关键细节，彻底替代硬编码或 localStorage 等不推荐方式，帮助开发者构建语义清晰、SEO 友好、服务端渲染兼容且易于维护的路由数据流。

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

终于介绍完啦！小伙伴们，这篇关于《Next.js路由传参与获取方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！