next.js 如何使用带条件的下一个链接href

dw1jzc5e  于 2023-04-20  发布在  其他
关注(0)|答案(1)|浏览(158)

我有这个代码:

<a
  onClick={() => {
    if (fortype === "user") {
      if (rd.track !== null) {
        router.push({
          pathname: `/tracks/${rd.track._id}`,
          query: {
            from: router.asPath,
            at: page,
          },
        });
      }
    } else {
      if (rd.owner !== null) {
        router.push({
          pathname: `/users/${rd.owner._id}`,
          query: {
            from: router.asPath,
            at: page,
          },
        });
      }
    }
  }}
>
  My link
</a>

我试图用next/link替换<a>标签,但它给了我这个错误:
错误:失败的 prop 类型:prop href需要<Link>中的stringobject,但得到的却是function。打开浏览器的控制台以查看组件堆栈跟踪。
我试着这样做:

import Link from "next/link";

<Link
  href={() => {
    if (fortype === "user") {
      if (rd.track !== null) {
        return {
          pathname: `/tracks/${rd.track._id}`,
          query: {
            from: router.asPath,
            at: page,
          },
        };
      }
    } else {
      if (rd.owner !== null) {
        return {
          pathname: `/users/${rd.owner._id}`,
          query: {
            from: router.asPath,
            at: page,
          },
        };
      }
    }
  }}
>
  My link
</Link>
6fe3ivhb

6fe3ivhb1#

您的逻辑是正确的,但<Link>组件不接受函数,
但是,如果你声明一个函数,然后把它的结果传递给href,它就可以工作了:

const myFunction = () => {
//...
}

这是可行的,因为这里你传递的是一个函数的结果,它是一个对象,而不是一个函数。

<Link
  href={myFunction()}
>
My link
</Linl>

相关问题