我正在构建一个NextJS应用程序,并努力将数据传递到动态生成的页面中。
在我的应用程序中,数据是从AmazonS3存储桶中提取并Map的,提取过程按预期工作,提供了一组由外部数据源填充的tile。
{data
?.filter(
(item: any) =>
selectedCategory === null ||
item.videoCategory === selectedCategory
)
.map((item: any) => (
<div key={item.id}>
{showOverlay && (
<div className="relative inset-0 flex h-80 w-80 animate-pulse items-center justify-center bg-red-500 text-center"></div>
)}
<Link
href="/videos/normal/[video]"
as={`/videos/normal/${item.videoID}`}
>
<HoverVideoPlayer videoSrc={item.videoLink} />
</Link>
</div>
))}
现在,我希望每个tile链接到一个动态生成的详细页面,为此我生成了一个slugged [video]. tsx页面。
每个动态生成的页面上的数据应该基于Map该数据的数据/数组的"videoID"属性。数据如下所示:
"id": "2",
"videoLink": "https://media.w3.org/2010/05/sintel/trailer_hd.mp4",
"videoLinkDeep": "https://media.w3.org/2010/05/sintel/trailer_hd.mp4",
"videoTitle": "Stopmotion",
"videoID": "100007_LX",
链接到页面可以正常工作,页面组件可以正确呈现,但据我所知-没有传递任何数据。
我的[视频]. tsx是这样设置的:
import React from 'react';
const VideoPage = (props: {
params: VideoParams;
json: any;
video: any;
data: any;
}) => {
if (!props.video) {
return <p>Video not found</p>;
}
return (
<div>
<h1>{props.video.videoTitle}</h1>
</div>
);
};
interface VideoParams {
id: string;
}
export async function getServerSideProps({ params }: { params: VideoParams }) {
const res = await fetch('https://www.externalsource.com/VideoData.json');
const json = await res.json();
console.log(params.id);
console.log(json);
const video = json.find((item: any) => item.link === params.id);
console.log(video);
if (video) {
return {
props: {
video,
},
};
}
return {
props: {
video: null,
},
};
}
export default VideoPage;
我已检查了所有拼写/导入相关问题,并集成了一个Fallbacks和多个控制台日志以进行调试:
- 触发此回退:打开其中一个动态页面时,显示"找不到视频"
if(! props.video){返回
未找到视频
;}
- 我的console.log
控制台日志(视频);
表示已从外部源获取所有数据,但以"undefined"结尾。
在链接和动态页面之间的切换中出了什么问题?
1条答案
按热度按时间dauxcl2d1#
在NextJS中定义动态路由时,文件名会作为
params
中的param,您试图访问params.id
,但文件名为[video].tsx
,因此您应该访问params.video
。以下是有关动态路由的文档:https://nextjs.org/docs/routing/dynamic-routes