Next.js链接组件(作为props)未按预期工作

polkgigr 于 2023-05-22 发布在其他

关注(0)|答案(1)|浏览(205)

Next.js链接组件（作为props）不工作
我想在我的Nextjs项目中创建模态路由（使用应用路由器）。当点击其中一个项目时，它将在一个模式中打开，而不是路由到另一个视图。
我有一个动态路由，如下所示：

/explore/[recipeId]

每一项都是一个Nextjs Link组件，点击后会打开modal。

<Link
  href={`/explore/?recipeId=${id}`}
  as={`/explore/${id}`}
></Link>

在explore页面文件（explore/page.js）中，当检测到查询参数的存在时，模态将打开。

<Modal visible={!!recipeId}>
  <Recipe id={recipeId as string} />
</Modal>

我的期望：

点击后浏览器显示url为http://localhost:3000/explore/[id]
Modal已打开（无重定向）

但当我测试行为时，我得到的是：

点击后浏览器显示url为http://localhost:3000/explore/[id]
模态未打开

这种情况就像当as props存在时href被Link组件忽略。它将路由到as props中提到的url（不呈现href指向的内容）。
我试过将as的prop改为一些随机参数，如/random，结果会变成 404，而不是以模态呈现/explore/[id]页面。
不确定我是否误解了as在Nextjs Link组件中的用法。感谢任何帮助。

next.js

来源：https://stackoverflow.com/questions/76286059/next-js-link-component-as-props-not-working-as-intended

1条答案

按热度按时间

z4iuyo4d1#

您遇到的Next.js Link组件未按预期工作的问题可能是由于“as”属性的使用不正确。“as”属性用于自定义URL的动态路由，但在您的示例中，您使用的是错误的。
要实现打开模式而不是导航到其他页面的所需行为，您可以按如下方式修改代码：
1.在Link组件中，删除“as”属性并更新href，如下所示：

<Link href={`/explore/${id}`} passHref>
    <a></a>
   </Link>

1.在explore页面文件（explore/page.js）中，可以使用Next.js提供的useRouter钩子访问recipeId查询参数：

import { useRouter } from 'next/router';

// ...

const router = useRouter();
const { recipeId } = router.query;

<Modal visible={!!recipeId}>
  <Recipe id={recipeId as string} />
</Modal>

通过使用useRouter钩子，您可以从URL访问查询参数。然后，您可以根据recipeId查询参数的存在有条件地呈现模态。
通过这些更改，当您单击Link组件时，它会将URL更新为“http：//localhost：3000/explore/[id]”，并且将根据查询参数的存在打开模态。
记住为Link组件和useRouter钩子导入必要的依赖项。

赞(0）回复(0）举报 2023-05-22

我来回答

Next.js链接组件(作为props)未按预期工作

1条答案

相关问题

热门标签

最新问答