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.
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>
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
<Link to="https://discord.gg/Zrk8kXfs">
<Button text="Join Our Discord" />
</Link>
LOL, was literally typing the same thing as the above
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;