How can I link to another website in React?-CodePudding

I have these div cards with some information, and I would like to insert a link inside them, that redirects to another site. It didn't work with <a></a>. can anybody help me?

Thanks!

import React from "react";

function Card(props) {
  return (
      <div className="card">
        <img className="img-logo" src={props.img} alt="image_logo" />
        <h3 className="name"> {props.name}</h3>
        <p className="paragraph"> {props.description}</p>
        <a href={props.link}>Page</a>
      </div>
  );
}

export default Card;

CodePudding user response：

You can add an element with the onclick event:

window.location.href = "http://mywebsite.com/home.html";

I didn't test it but it should probably work. You can find documentation for this at https://www.w3schools.com/js/js_window_location.asp

CodePudding user response：

You can use the <Link> component from react router.

If you are opening the url in new tab, make sure to use noopener and noreferrer so that the browser does not attach the current website's window variable to the newly opened url in the new tab, which can be a security loophole.

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

export const openInNewTab = (url) => {
  const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
  if (newWindow) newWindow.opener = null;
};

function Card(props) {
  return (
      <div className="card">
        <img className="img-logo" src={props.img} alt="image_logo" />
        <h3 className="name"> {props.name}</h3>
        <p className="paragraph"> {props.description}</p>
        <Link href="#" onClick = {() => openInNewTab(props.link)}>Page</Link>
      </div>
  );
}