Next.js：router.query 在动态路由中返回未定义，导致无限重新渲染并绕过始终错误的条件

Question

Next.js：router.query 在动态路由中返回未定义，导致无限重新渲染

我的 Next.js 应用程序遇到问题，我尝试使用 URL 中包含的代码获取有关游戏的数据。例如，对于 URL localhost:3001/4fac3e，我使用 router.query 来提取游戏代码。但是，router.query 似乎返回未定义，这不是预期的行为。

这会导致我的获取请求以 gameCode = undefined 执行，更重要的是，

if (!router.isReady || !gameCode) return;

行似乎不起作用，导致无限重新渲染并最终导致应用程序崩溃。

这是我的目录结构：

pages  ├── [gameCode]  │   └── index.tsx

这是index.tsx 文件

'use client'

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

const GameIndex = () =\> {
const \[game, setGame\] = useState(null);
const router = useRouter();
const { gameCode } = router.query;

    useEffect(() => {
        if (!router.isReady || !gameCode) return;
    
        fetch(`/api/game/${gameCode}/`)
            .then(response => response.json())
            .then(data => setGame(data))
            .catch(error => console.error('Error fetching game:', error));
    }, [router.isReady, gameCode]);
    
    return (
        <div>
            {game ? (
                <div>Game Data: {JSON.stringify(game)}</div>
            ) : (
                <div>Waiting for game data...</div>
            )}
        </div>
    );

}

export default GameIndex;

我尝试过调整条件，但没有成功。

Answer 1

我建议使用 Nextjs 的

getServerSideProps

来实现此目的。在文件的底部，您可以放置类似的内容：

export async function getServerSideProps(context: any) {
    const gameCode = context.params.gameCode;

    return {
        props: {
            gameCode,
        },
    }
}

然后解构道具，例如：

const GameIndex = ({ gameCode }) => ....