当前位置：首页 > 文章列表 > 文章 > 前端 > Next.js路由传参与获取方法详解

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

2026-03-03 21:37:09 0浏览收藏

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

如何在 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 } };
}