I want to click on View Menu button on the Home page and redirect it to Menu file. So when i click on View Menu I can see the Menu Available I want to click on View Menu button on the Home page and redirect it to Menu file. So when i click on View Menu I can see the Menu Available
Home File
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;
Restaurant File i.e to be displayed onClick
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;
To do so: add a Link component
Home File
import {Link} from "react-router-dom";
...
<Link to="/Restaurant" className="home_button">View Menu</Link>
To achieve this, First in your App.js use these lines of code along with others (you can change the path name these are only for you to understand).
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>
</>
);
}
And in Home File use this
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;
let me know if you got any doubts in the comments. Thanks
Sometimes it's a case where we have to programmatically route stuff, They try to use it like this. But this needs a dom-manipulation manually, which is not recommended in React! Use Link Component wherever possible. But still, we end up in a situation like this, where you can use this approach.
function Component(){
const handleClickEvent = () =>{
window.history.pushState("domain","title","pathToGo");
window.history.go()
}
return (
<Button onClick={() => handleClickEvent()}>Button</Button>
);