Quiero hacer clic en el botón Ver menú en la página de inicio y redirigirlo al archivo de menú . Entonces, cuando hago clic en Ver menú , puedo ver el menú disponible . Quiero hacer clic en el botón Ver menú en la página de inicio y redirigirlo al archivo de menú . Entonces, cuando hago clic en Ver menú , puedo ver el Menú disponible
Archivo de inicio
import React from 'react' import Restaurant from "./Restaurant"; const Home = () => { return ( <div className="homeMain"> <img className="home_img" src="https://i.pinimg.com/originals/53/b5/d7/53b5d70023efa05ec6797b25df413b73.jpg"/> <h1 className="home_h1 text-center">Maryam's Restaurant</h1> **want to insert button here ** </div> ) } export default Home;Archivo de restaurante, es decir, para mostrarse al hacer clic
import React, {useState} from 'react'; import { NavLink } from "react-router-dom"; import App from "./App"; import menuList from "./menuList" import Breakfast from "./Breakfast"; import Home from "./Home"; import WebPages from "./WebPages"; const uniqueList = () => [... new Set ( menuList.map((curElem) => { return curElem.category; }) ), "All", ] const Restaurant = () => { const [menuData, setMenuData] = useState(menuList); const [data, setData] = useState(uniqueList); const filterItem = (category) => { if(category === "All") { setMenuData(menuList); return; } const updatedList = menuList.filter((curElement) => { return curElement.category === category; }); setMenuData(updatedList); } return ( <div className="container-fluid"> <App filterItem={filterItem} data={data} /> <Breakfast menuData={menuData}/> </div> ) } export default Restaurant;Para hacerlo: agregue un componente de enlace
Archivo de inicio
import {Link} from "react-router-dom"; ... <Link to="/Restaurant" className="home_button">View Menu</Link>Para lograr esto, primero en su App.js use estas líneas de código junto con otras (puede cambiar el nombre de la ruta, estos son solo para que los entienda).
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import Restaurant from "./components/Restaurant"; const App ()=>{ return ( <> <Router> <Switch> <Route path="/Restaurent" exact> <Restaurent /> </Route> </Switch> </Router> </> ); }Y en Home File usa esto
import React from 'react' import Restaurant from "./Restaurant"; import {Link} from "react-router-dom"; const Home = () => { return ( <div className="homeMain"> <img className="home_img" src="https://i.pinimg.com/originals/53/b5/d7/53b5d70023efa05ec6797b25df413b73.jpg"/> <h1 className="home_h1 text-center">Maryam's Restaurant</h1> <Link to="/Restaurant" className="button">Open Menu</Link> </div> ) } export default Home;déjame saber si tienes alguna duda en los comentarios. Gracias
A veces es un caso en el que tenemos que enrutar cosas mediante programación. Intentan usarlo de esta manera. ¡Pero esto necesita una manipulación manual de dom, lo cual no se recomienda en React! Utilice el componente de enlace siempre que sea posible. Pero aún así, terminamos en una situación como esta, donde puedes usar este enfoque.
function Component(){ const handleClickEvent = () =>{ window.history.pushState("domain","title","pathToGo"); window.history.go() } return ( <Button onClick={() => handleClickEvent()}>Button</Button> );