Creé algunos botones para mi sitio en reaccionar. Usé una etiqueta de anclaje y todo funcionaba bien, pero por alguna razón ya no funcionan. No recuerdo haber hecho ningún cambio y estoy confundido en cuanto a por qué se detuvo. Aquí está el botón importado y usado en el archivo "About.js".
<Button text="Join Our Discord" link="https://discord.gg/Zrk8kXfs" />
Y aquí es donde creé el botón en "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;Cualquier ayuda sería muy apreciada.
Intente usar la función "Enlace" de react-router-dom, primero, 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, literalmente estaba escribiendo lo mismo que el anterior
No debe usar la etiqueta a dentro del button . Confundirá al lector de pantalla para algunos navegadores. En su lugar, debe usar la etiqueta como su funcionalidad
He actualizado tu código:
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;