代码之家 › 专栏 › 技术社区 › Mel

如何用条件逻辑定义主链接

next.js reactjs

Mel · 技术社区 · 2 年前

我正试图弄清楚如何定义一个主页链接,如果有经过身份验证的用户,该链接将呈现一个页面,如果没有,则呈现另一个页面。

我的功能是检查是否有经过身份验证的用户。到目前为止,它适用于我的整个应用程序。

当我尝试:

<HomeLink
            href={!me?  "/" | "/dash"}
           
          >
            <Logo />
          </HomeLink>

我得到一个错误,上面写着:

类型“boolean”不可分配给类型“string”。ts(2322) Nav.tsx(147,3):所需的类型来自属性“href”,该属性为在类型'IntrinsicAttributes&HomeLinkProps

My HomeLinkProps的定义如下:

interface HomeLinkProps extends LinkProps {
  href: string
}

function HomeLink({ href, ...props }: HomeLinkProps) {
  const { asPath } = useRouter()
  const isActive = asPath === href

  return (
    <NextLink passHref href={href}>
      <Link
        px={4}
        py={2}
        textDecor="none !important"
       
        {...props}
      >
        {props.children}
      </Link>
    </NextLink>

我认为它被正确地定义为字符串——href条件中的两个替代项都是字符串——但我不知道如何在Logo字段中表达这一点。

在将主页链接直接指向一个或另一个页面之前,如何添加条件来检查已验证用户?