使用 next js 14.1.1 发送一个对象，它在我发送到的页面上显示为未定义

Question

我正在将一个名为footprintsData的对象从我的问题屏幕发送到结果屏幕，如下所示

const footprintsData = {
                    carFootprint: roundedCarFootprint,
                    electricityFootprint: roundedElectricityFootprint,
                    gasFootprint: roundedGasFootprint,
                    commuteFootprint: roundedCommuteFootprint,
                    airTravelFootprint: roundedAirTravelFootprint,
                    totalFootprint: parseFloat(totalFootprint.toFixed(2)),
                };

              
                router.push({
                    pathname: '/results',
                    query: { footprintsData: footprintsData },
                });

在结果屏幕上，我尝试读取数据，如下所示：

const router = useRouter();
const { totalFootprint, carFootprint, electricityFootprint, gasFootprint, commuteFootprint, airTravelFootprint } = router.query;

但是出现以下错误

未处理的运行时错误 类型错误：无法解构“router.query”的属性“totalFootprint”，因为它未定义。

我正在使用 next js 版本 14.1.1 并尝试了以下方法来发送我的数据对象

console.log("个人足迹：",footprintsData);

router.push('/result', 查询:{carFootprint});

router.push('/test?totalfootprint='+totalFootprint, {totalFootprint:totalFootprint });

运动结果 路由器.push({ 路径名：'/结果'， 查询：{footprintsData：footprintsData}， });

但同样的错误始终存在。我什至制作了一个测试屏幕，没有显示任何其他内容，但仍然没有正确接收该对象。

Answer 1

你有 import { useRouter } from "next/router"; ？

如果是这样，也许尝试使用“next/navigation”而不是与 router.pathname 结合使用。