如何让 NextJS 拾取多个动态路由？

Question

我正在使用名为 NextJS 的动态页面创建

[video].tsx

动态页面创建为：

 const Video = (props) => {
 const router = useRouter()
 const { video } = router.query
 const videoData = GeneralVideo.find((d) => d.link === video)

链接设置为：

<Link  href={'/videos/' + item.link} passHref={true}>

然后使用以下 URL 成功创建动态页面：

http://localhost:3000/videos/100004_SF

并且 [video].tsx 页面被正确拾取。

现在，我想将第二组动态页面设置为

[early].tsx

然后将动态页面创建为：

 const Early = (props) => {
 const router = useRouter()
 const { early } = router.query
 const videoData = GeneralVideo.find((d) => d.linkEarly === early)

链接设置为：

 <Link href={'/videos/' + item.linkEarly} passHref={true}>

现在，动态链接成功生成为

http://localhost:3000/videos/100159_SF_early

但是 [early].tsx 组件没有被正确拾取并提供一个空页面。

我的设置错误在哪里？

Answer 1

假设您创建了两个动态路由，/videos/[video] 和 /video/[early]，您可能会认为这两个表示不同的路由，因为正在使用的动态参数具有不同的名称，但对于 NextJS，它是相同的路由。 所以有两种方法可以解决它：

---

方法一

将动态路由更改为 /videos/normal/[link] 和 /videos/early/[link]

---

方法二

在您的原始路由（即 /videos/[link]）中，为两类视频传递不同的 url 参数，即问号之后的参数，然后在路由器查询中使用它来相应地渲染组件。

---