Why does my React button no longer link to an external site using anchor tags?-CodePudding

I created a few buttons for my site in react. I used an anchor tag and everything was working fine but for some reason they no longer work. I don't remember making any changes and am confused as to why it stopped. Here's the button imported and used in the "About.js" file.

<Button text="Join Our Discord" link="https://discord.gg/Zrk8kXfs" />

And here is the where I created the button in "Button.js".

import React from "react";
import styled from "styled-components";

const Btn = styled.button`
  display: inline-block;
  background-color: ${(props) => props.theme.text};
  color: ${(props) => props.theme.body};
  outline: none;
  border: none;

  font-size: ${(props) => props.theme.fontsm};
  padding: 0.9rem 2.3rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;

  &:hover {
    transform: scale(0.9);
  }

  &::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    border: 2px solid ${(props) => props.theme.text};
    width: 100%;
    height: 100%;
    border-radius: 50px;
    transition: all 0.2s ease;
  }

  &:hover::after {
    transform: translate(-50%, -50%) scale(1);
    padding: 0.3rem;
  }
`;

const Button = ({ text, link }) => {
  return (
    <Btn>
      <a href={link} aria-label={text} target="_blank" rel="noreferrer">
        {text}
      </a>
    </Btn>
  );
};

export default Button;

Any help would be greatly appreciated.

CodePudding user response：

Try using "Link" feature from react-router-dom, first, npm i react-router-dom

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

<Link to="https://discord.gg/Zrk8kXfs">
  <Button>Join Our Discord</Button>
</Link>

CodePudding user response：

You shouldn't use the a tag inside the button. It will confuse the screen reader for some browsers. Instead, you should use the tag as its functionality

I've updated your code:

import React from "react";
import styled from "styled-components";

const StyledLink = styled.a`
  display: inline-block;
  background-color: #efefef;
  color: ${(props) => props.theme.body};
  outline: none;
  border: none;

  text-decoration: none;

  font-size: ${(props) => props.theme.fontsm};
  padding: 0.9rem 2.3rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;

  &:hover {
    transform: scale(0.9);
  }

  &::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    border: 2px solid ${(props) => props.theme.text};
    width: 100%;
    height: 100%;
    border-radius: 50px;
    transition: all 0.2s ease;
  }

  &:hover::after {
    transform: translate(-50%, -50%) scale(1);
    padding: 0.3rem;
  }
`;

const Button = ({ text, link }) => {
  return (
    <StyledLink href={link} aria-label={text} target="_blank" rel="noreferrer">
      {text}
    </StyledLink>
  );
};

export default Button;

CodePudding user response：

To use a button as a link in React, wrap the button in an <a> tag or a Link component if using react router. The button will get rendered instead of the link and clicking on it will cause the browser to navigate to the specified page. App.js

https://bobbyhadz.com/blog/react-button-link#:~:text=To use a button as a link in,browser to navigate to the specified page. App.js

<Link to="https://discord.gg/Zrk8kXfs">
  <Button text="Join Our Discord" />
</Link>

LOL, was literally typing the same thing as the above