Next.js中如何通过router.push传递userId并在目标组件中使用

分两种Next.js路由模式给出具体实现：

一、Pages Router（pages目录结构） #

1. PostCard组件跳转逻辑（保持现有写法即可） #

import { useRouter } from 'next/router';

const PostCard = (props) => {
  const router = useRouter();

  const handleJumpToUser = () => {
    // 直接跳转到动态路由页面，路径里的_id就是要传递的userId
    router.push(`/user/${props.user._id}`);
  };

  return <div onClick={handleJumpToUser}>查看用户主页</div>;
};

export default PostCard;

2. 目标页面（pages/user/[userId].js）修改数据获取逻辑 #

原本从localStorage取userId，现在优先使用路由参数里的userId，没有的话再 fallback 到localStorage：

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

const UserPage = () => {
  const router = useRouter();
  const { userId } = router.query; // 从动态路由获取传递的userId
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    // 确定要使用的userId：路由参数存在则用它，否则取localStorage的
    const targetUserId = userId || localStorage.getItem('userId');
    
    if (targetUserId) {
      // 调用接口获取用户数据
      fetch(`/api/users/${targetUserId}`)
        .then(res => res.json())
        .then(data => setUserData(data));
    }
  }, [userId]); // 监听userId变化，路由参数更新时重新请求数据

  if (!userData) return <div>加载中...</div>;

  return <div>用户名：{userData.name}</div>;
};

export default UserPage;

二、App Router（app目录结构） #

1. PostCard组件跳转逻辑 #

import { useRouter } from 'next/navigation';

const PostCard = (props) => {
  const router = useRouter();

  const handleJumpToUser = () => {
    router.push(`/user/${props.user._id}`);
  };

  return <div onClick={handleJumpToUser}>查看用户主页</div>;
};

export default PostCard;

2. 目标页面（app/user/[userId]/page.js）修改数据获取逻辑 #

在App Router中，动态路由参数通过页面组件的params属性获取：

'use client'; // 如果需要在客户端执行逻辑，加上这行
import { useEffect, useState } from 'react';

// 从params中获取动态路由的userId
const UserPage = ({ params }) => {
  const { userId } = params;
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    const targetUserId = userId || localStorage.getItem('userId');
    
    if (targetUserId) {
      fetch(`/api/users/${targetUserId}`)
        .then(res => res.json())
        .then(data => setUserData(data));
    }
  }, [userId]);

  if (!userData) return <div>加载中...</div>;

  return <div>用户名：{userData.name}</div>;
};

export default UserPage;

关键逻辑说明 #

• 跳转时直接通过动态路由路径传递userId，比查询参数（?userId=xxx）更符合RESTful规范，也更直观。
• 目标页面优先使用路由参数中的userId，确保从PostCard跳转过来时能覆盖localStorage的默认值；如果是用户直接访问个人主页（比如从导航栏进入），则 fallback 到localStorage的登录用户ID，兼容原有逻辑。

内容的提问来源于stack exchange，提问作者Unnikrishnan KJ