使用 ReactJS 重定向到外部 link

Question

我想添加按钮属性，点击它会重定向到外部 link。应该添加到按钮的道具是 siteURL 。按钮应该在 class = "project-item-details-container" 中。我必须安装任何外部包吗？

示例按钮：访问站点

我写的代码 -

  const ProjectItem = props => {
  const {projectDetails} = props
  const {projectId, imageURL, description, title, siteURL} = projectDetails
  return (
    <>
      <li className="project-item-container">
        <img
          className="project-item-image"
          src={imageURL}
          alt={`project-item${projectId}`}
        />
        <div className="project-item-details-container">
          <h1 className="project-item-title">{title}</h1>
          <p className="project-item-description">{description}</p>
        </div>
      </li>
    </>
  )
}

Answer 1

  const ProjectItem = props => {
  const {projectDetails} = props
  const {projectId, imageURL, description, title, siteURL} = projectDetails
  return (
    <>
      <li className="project-item-container">
        <img
          className="project-item-image"
          src={imageURL}
          alt={`project-item${projectId}`}
        />
        <div className="project-item-details-container">
          <h1 className="project-item-title">{title}</h1>
          <p className="project-item-description">{description}</p>
        </div>
        <a href={siteUrl}>{title}</a>
      </li>
    </>
  )
}

Answer 2

你可以这样做

 const ProjectItem = props => {
  const {projectDetails} = props
  const {projectId, imageURL, description, title, siteURL} = projectDetails
  return (
    <>
      <li className="project-item-container">
        <img
          className="project-item-image"
          src={imageURL}
          alt={`project-item${projectId}`}
        />
        <div className="project-item-details-container">
          <h1 className="project-item-title">{title}</h1>
          <p className="project-item-description">{description}</p>
          <button onClick={()=>window.location.href=siteURL}>{title}</button>
        </div>
      </li>
    </>
  )
}

Answer 3

好吧，我解决了这个问题。我在按钮元素中使用了属性。

const ProjectItem = props => {
  const {projectDetails} = props
  const {projectId, imageURL, description, title, siteURL} = projectDetails
  return (
    <>
      <li className="project-item-container">
        <img
          className="project-item-image"
          src={imageURL}
          alt={`project-item${projectId}`}
        />
        <div className="project-item-details-container">
          <h1 className="project-item-title">{title}</h1>
          <p className="project-item-description">{description}</p>
          <button type="button" className="project-redirect-button">
            <a href={siteURL} alt="Broken Link">
              Visit Site
            </a>
          </button>
        </div>
      </li>
    </>
  )
}

使用 ReactJS 重定向到外部 link

Redirecting to external link using ReactJS

javascript

reactjs

react-router

mern