Nextjs传递到路由器的href无效

kiz8lqtg 于 2022-11-23 发布在其他

关注(0)|答案(4)|浏览(143)

出现错误：

Invalid href passed to next/router: /users//posts, repeated forward slashes (//) or backlashes \ are not valid in the href

我明白为什么会这样

handleClick = () => {
  // some code
  router.push(`/users/${userId}/posts`)
}

userId是异步获取的，因此在编译过程中它并不存在，从而导致router.push('/users//posts')。但是，此代码位于handleClick中，单击按钮时会触发此代码。
如何解决此问题？

next.js

来源：https://stackoverflow.com/questions/68993527/nextjs-invalid-href-passed-to-router

4条答案

按热度按时间

xxslljrj1#

问题是我的导航栏的href是/users/[userId]/posts，而userId没有填写

赞(0）回复(0）举报 2022-11-23

nzk0hqpo2#

handleClick = () => {
  // some code
  //check link you are pushing
  console.log(`/users/${userId}/posts`)
  //router.push(`/users/${userId}/posts`)
}

你不能有//在你的链接，调试{userId}，认为它是未定义的，这就是为什么错误出现。
P.S.如果userId是异步的，请将if condition放在router.push之前

赞(0）回复(0）举报 2022-11-23

8wtpewkr3#

如果userId是异步获取的，那么函数和调用该函数的组件是什么样子的？
你在handleClick函数中有router.push函数，那么我猜你需要为userId传递一个参数。

<SomeComponent onClick={() => handleClick(userId)} />

函数如下所示：

const handleClick = (userId) => {
  router.push(`/users/${userId}/posts`);
};

赞(0）回复(0）举报 2022-11-23

nnvyjq4y4#

尝试以下代码
您应该删除/，因为它介于users和${userId}之间。

handleClick = () => {
  router.push(`/users${userId}/posts`)
}

赞(0）回复(0）举报 2022-11-23

我来回答

Nextjs传递到路由器的href无效

4条答案

相关问题

热门标签

最新问答