如何在Game页面的page.js中获取URL查询参数里的传递数据

以下分两种常见的Next.js路由方案给出实现方式：

方案一：Next.js 13+ App Router（game/page.js为App Router组件） #

因为App Router默认是服务器组件，要使用React Hooks需先标记为客户端组件，再用Next.js提供的useSearchParams钩子获取查询参数：

'use client';

import { useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';

export default function GamePage() {
  const searchParams = useSearchParams();
  const [gameData, setGameData] = useState(null);

  useEffect(() => {
    // 从URL中获取目标查询参数，比如?id=123
    const gameId = searchParams.get('id');
    
    if (gameId) {
      // 这里编写你的数据请求逻辑
      async function fetchGameData() {
        try {
          const res = await fetch(`/api/games/${gameId}`);
          const data = await res.json();
          setGameData(data);
        } catch (err) {
          console.error('获取游戏数据失败：', err);
        }
      }
      fetchGameData();
    }
  }, [searchParams]); // 参数变化时自动重新执行effect

  return (
    <div>
      {gameData ? (
        <div>
          <h1>{gameData.title}</h1>
          <p>{gameData.description}</p>
        </div>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

关键提示 #

• useSearchParams返回标准的URLSearchParams对象，除了get(key)，还可使用has(key)判断参数是否存在、getAll(key)获取多值参数等。
• 必须添加'use client'指令，否则无法使用React Hooks和客户端路由相关API。

方案二：旧版Next.js Pages Router（game/page.js为Pages Router组件） #

使用useRouter钩子获取查询参数，注意需要等待路由加载完成：

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

export default function GamePage() {
  const router = useRouter();
  const [gameData, setGameData] = useState(null);

  useEffect(() => {
    // 等待路由就绪，避免初始渲染时query未加载完成
    if (router.isReady) {
      const gameId = router.query.id;
      if (gameId) {
        async function fetchGameData() {
          try {
            const res = await fetch(`/api/games/${gameId}`);
            const data = await res.json();
            setGameData(data);
          } catch (err) {
            console.error('获取游戏数据失败：', err);
          }
        }
        fetchGameData();
      }
    }
  }, [router.isReady, router.query]); // 路由状态或参数变化时重新请求

  return (
    <div>
      {gameData ? (
        <div>
          <h1>{gameData.title}</h1>
          <p>{gameData.description}</p>
        </div>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

关键提示 #

• router.query在初始渲染时可能为空，必须通过router.isReady判断路由是否完全加载，避免获取到undefined。

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