代码之家 › 专栏 › 技术社区 › John Xie

如何制作下一个。链接中的JS链接只会打开一个带有内部网址的新标签页,而不会重定向到外部网址?

tailwind-css hyperlink next.js typescript javascript

John Xie · 技术社区 · 2 年前

我正在为我的主页创建一个显示项目的项目组件。当用户点击组件时,我希望整个组件重定向到特定的项目页面。但是,当他们专门点击GitHub图标时,我希望网站在新的选项卡中打开GitHub链接,而不是重定向到特定的项目页面。这是我当前为该组件编写的代码。

"use client";
import Image from "next/image";
import Link from "next/link";

type ProjectType = {
  img: string;
  title: string;
  slug: string;
  desc: string;
  overview: string;
  role: string;
  impact: string;
  tags: Array<string>;
  startDate: Date;
  endDate: Date;
  github?: string;
  paper?: string;
  link?: string;
  area: string;
};

function Tag({ tag }: { tag: string }) {
  return (
    <div className=" duration-500 ease-in-out text-center text-sm rounded-full p-2 mr-4 mb-4 w-1/5 text-primary-white bg-primary-white bg-opacity-50 group-hover:bg-primary-color group-hover:bg-opacity-100 ">
      {tag}
    </div>
  );
}

export default function ProjectFeatured({
  project,
  idx,
}: {
  project: ProjectType;
  idx: number;
}) {
  const options = { month: "short" as const, year: "numeric" as const };
  const isEven = idx % 2 == 0;
  const classNameString =
    "group w-full h-full p-12 rounded-3xl text-primary-white flex flex-col space-y-8 sm:space-y-0 sm:space-x-8 duration-500 ease-in-out hover:bg-primary-hover " +
    (isEven ? "sm:flex-row" : "sm:flex-row-reverse sm:space-x-reverse");

  return (
    <Link href={"/projects/" + project.slug}>
      <div className={classNameString}>
        {/* Image */}
        <div className="flex w-1/2 items-center justify-center">
          <Image
            className="object-cover h-full rounded-xl"
            src={project.img}
            alt="Project Image"
            width={1000}
            height={1000}
            draggable={false}
          />
        </div>
        {/* Text */}
        <div className="flex flex-col w-3/4 justify-between space-y-12">
          {/* Title and desc */}
          <div className="flex flex-col space-y-4">
            {/* Title */}
            <div>
              <div className="text-xxl">{project.title}</div>
              {/* <Image/> */}
            </div>
            {/* Desc */}
            <div>{project.desc}</div>
          </div>
          {/* Tags and links */}
          <div className="flex flex-col space-y-4">
            {/* Tags */}
            <div className="flex flex-row flex-wrap">
              {project.tags.map((tag, idx) => (
                <Tag tag={tag} key={idx} />
              ))}
            </div>
            {/* Links */}
            <div className="flex flex-row space-x-2 ">
              {project.github ? (
                <Link className="w-full" href={project.github} target="_blank">
                  <Image
                    className=" hover:animate-shrinkWiggle"
                    src={"svgs/github.svg"}
                    alt="Github Icon"
                    width={20}
                    height={20}
                  />
                </Link>
              ) : (
                <div />
              )}
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
}

我尝试删除target=“_blank”,这确实会使单击GitHub图标重定向到GitHub页面,但我希望GitHub页面在新选项卡中打开,而不是将原始选项卡重定向到项目页面。

3 回复 | 直到 2 年前

Tyson Z 2 年前

我想你可以试着添加一个 onClick 处理程序到内部链接组件(即Github链接),看看它是否有帮助

<Link className="w-full" href={project.github} target="_blank" 
  onClick={(event) => event.stopPropagation()} // <--- Add this
>
 // ...
</Link>

进一步阅读:

https://javascript.info/bubbling-and-capturing

abuzain 2 年前

您可以为此创建两个可重用组件。通过这样做,您可以实现所需的行为,同时仍然保持事物的声明性和描述性以下是我在 https://pafyll.com/en-NO

外部链接

const LinkExternal = ({
  href,
  children,
  className = "",
  label = "",
  ...rest
}) => {
  return (
    <a className={className} href={href} aria-label={label} {...rest}>
      {children}
    </a>
  );
};

export default LinkExternal;

内部链接

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

const LinkInternal = ({
  href,
  children,
  className = "",
  label = "",
  activeClassName = "",
}) => {
  const router = useRouter();

  return (
    <Link href={href} passHref legacyBehavior>
      <a
        className={cx(className, {
          [activeClassName]: router.pathname === href,
        })}
        aria-label={label}
      >
        {children}
      </a>
    </Link>
  );
};

export default LinkInternal;

更新您的代码:

{project.github ? (
                <LinkExternal className="w-full" href={project.github} target="_blank">
                  <Image
                    className=" hover:animate-shrinkWiggle"
                    src={"svgs/github.svg"}
                    alt="Github Icon"
                    width={20}
                    height={20}
                  />
                </LinkExternal >

Lã Ngá»c Háº£i 2 年前

我认为你可以简单地使用普通 <a> 当你想在新标签中打开github时:

 <a className="w-full" href={project.github} target="_blank">
    <Image/>
 </a>