如何在Next.js中带条件使用next/link的href属性

原本使用<a>标签通过onClick事件结合条件判断调用router.push实现页面跳转：

<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.js的next/link组件时写法如下，却报错：Error: Failed prop type: The prop hrefexpects astringorobjectin, but got function instead.

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>

解决方案：提前计算href值或结合点击事件处理 #

Next.js的Link组件的href属性不接受函数，只能传入字符串或路由对象，因此需要调整写法：

方式1：提前计算href变量（推荐，符合Link预渲染优化）

先根据条件计算出目标路由对象，再传递给Link的href属性，同时通过passHref确保内部标签继承跳转属性：

import Link from "next/link";
import { useRouter } from "next/router";

const router = useRouter();

// 提前计算目标路由
const getTargetHref = () => {
  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,
        },
      };
    }
  }
  return null;
};

const targetHref = getTargetHref();

<Link href={targetHref || "#"} passHref>
  <a onClick={(e) => !targetHref && e.preventDefault()}>
    My link
  </a>
</Link>

方式2：在内部元素的onClick中处理条件跳转（保留原标签逻辑）

import Link from "next/link";
import { useRouter } from "next/router";

const router = useRouter();

<Link href="#" passHref>
  <a
    onClick={(e) => {
      e.preventDefault();
      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>
</Link>