0

Below is my code for Cards.js file, right now it's a card that you can click on and it links to the Services page with path ='/services' from within the same website, I would like to add a link to another website, how would I go about doing that? would I need to add an a href= link to Cards.js?

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;

Below is CardItem.js if needed

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;
Vancityuwu
  • 1
  • 1

3 Answers3

0

I'm not sure, but I think that you would only have to create a second CardItem with its attribute path = complete link to external website.

Example :

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

If you just want to simply link to another website then you can simply use an anchor tag, if you want to declare a Route from react-router-dom for that link to follow, you need to look at this post

Aqib Naeem
  • 431
  • 3
  • 11
0

As per documentation React-Router understands only internal paths. Then an anchor tag is needed. I would do a wrapper component for Link that chose if render an anchor or the router link object. Then use it instead of "Link".

Something like (code not tested):

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