在 React JS 中單擊 Card 后如何添加指向另一個網站的鏈接

Question

下面是我的 Cards.js 文件的代碼，現在它是一張可以點擊的卡片，它鏈接到同一個網站中路徑 ='/services' 的服務頁面，我想添加一個指向另一個網站的鏈接，我會怎么做 go 我需要向 Cards.js 添加一個 href= 鏈接嗎？

import React from 'react';
import CardItem from './CardItem';
import './Cards.css'

function Cards() {
 return (
  <div className='cards'>
    <h1>Check out my Programming Portfolio Projects!</h1>
    <div className='cards__container'>
      <div className='cards__wrapper'>
        <ul className="cards__items">
          <CardItem 
          src={`${process.env.PUBLIC_URL}/images/ReactSocialPosts.jpg`}
          text='hello testing 123'
          label='This is a card'
          path ='/services'
          />
        </ul>
      </div>
    </div>
  </div>
 )
}

export default Cards;

如果需要，下面是 CardItem.js

import React from 'react';
import { Link } from 'react-router-dom';

function CardItem(props) {
  return (
    <>
      <li className='cards__item'>
        <Link className='cards__item__link' to={props.path}>
          <figure className='cards__item__pic-wrap' data-category={props.label}>
            <img
              src={props.src}
              alt='Travel Image'
              className="cards__item__img"
            />
          </figure>
          <div className='cards__item__info'>
            <h5 className='cards__item__text'>{props.text}</h5>
          </div>
        </Link>
      </li>
    </>
  );
}

export default CardItem;

Answer 1

我不確定，但我認為您只需要創建第二個 CardItem ，其屬性path = complete link to external website 。

例子：

 <CardItem 
          src={`${process.env.PUBLIC_URL}/images/OtherImage.jpg`}
          text='External website'
          label='A label'
          path ='https://externalwebsite.com'
          />

Answer 2

如果您只想簡單地鏈接到另一個網站，那么您可以簡單地使用錨標記，如果您想從 react-router-dom 聲明一個路由以跟隨該鏈接，您需要查看這篇文章

Answer 3

根據文檔 React-Router 僅了解內部路徑。 然后需要一個錨標記。 我會為 Link 做一個包裝器組件，選擇是否渲染錨點或路由器鏈接 object。 然后使用它代替“鏈接”。

類似的東西（代碼未測試）：

const MyLink = ({path, children, ...props}) => {
    const comp = path?.trim().substring(0,4) === "http" ? <a href={path}> : <Link to={path}>;
    return <comp ...props>{children}</comp>
};