FYI estoy aprendiendo reactjs. Tengo una pregunta rápida. Estoy desarrollando un sitio web de restaurante y quiero que mi botón "Ver menú completo" en mi página de inicio (Home.js) me lleve a mi archivo menu.js. Pude redirigir a la página del menú en mi archivo App.js, que es esencialmente donde tengo mis componentes funcionales de la barra de navegación. Avíseme si necesito mostrar más código para esta pregunta. Además, sé que probablemente tenga que usar "onClick" en el botón, pero después de investigar un poco, no puedo encontrar la manera de ir a la página menu.js. Gracias de antemano.
<div> <Card className="text-center"> <Card.Header>Featured</Card.Header> <Card.Body> <Card.Title>Menu</Card.Title> <Card.Text> orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At consectetur lorem donec massa sapien. Euismod lacinia at quis risus sed vulputate odio ut. </Card.Text> <Button variant="primary">View Full Menu</Button> </Card.Body> <Card.Footer className="text-muted"></Card.Footer> </Card> </div>Aquí está mi botón de "menú" de trabajo en mi archivo App.js.
function App () { return ( <BrowserRouter> <div className="App"> <Navigation /> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/menu" element={<MenuApp />} /> <Route path= "/fire" element={<Fire />}/> </Routes> </div> </BrowserRouter> ); }Además de las respuestas anteriores, puede usar el componente React Router Link de esta manera:
<Link to="/menu"> View Full Menu </Link>O el gancho useHistory() como en este ejemplo de los documentos:
import { useHistory } from "react-router-dom"; function HomeButton() { let history = useHistory(); function handleClick() { history.push("/home"); } return ( <button type="button" onClick={handleClick}> Go home </button> ); }Usando react-router v6, puede navegar imperativamente usando el enlace useNavigate:
const navigate = useNavigate(); const handleMenuClick = () => navigate("/menu", { replace: true }); <div> <Card className="text-center"> <Card.Header>Featured</Card.Header> <Card.Body> <Card.Title>Menu</Card.Title> <Card.Text> orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At consectetur lorem donec massa sapien. Euismod lacinia at quis risus sed vulputate odio ut. </Card.Text> <Button variant="primary" onClick={handleMenuClick}>View Full Menu</Button> </Card.Body> <Card.Footer className="text-muted"></Card.Footer> </Card> </div>Puede usar el useNavigate para navegar mediante programación de una ruta a otra.
import { useNavigate } from "react-router-dom"; const Component = () => { const navigate = useNavigate(); const handleGoToMenu = () => navigate("menu"); return ( <Button variant="primary" onClick={handleGoToMenu}>View Full Menu</Button> ); }