FYI I'm learning reactjs. I have a quick question. I am developing a restaurant website and I want to make my "View Full Menu" button on my homepage(Home.js) take me to my menu.js file. I was able to redirect to the menu page on my App.js file, which is essentially where I have my functional navbar components. Please let me know if I need to show more code for this question. Also, I know that I probably have to use "onClick" on the button, but after doing some research, I cannot figure out how to go to the menu.js page. Thank you in advance.
<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>
Here is my working "menu" button on my App.js file.
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>
);
}
As well as the answers above, you could use the React Router Link component like this:
<Link to="/menu">
View Full Menu
</Link>
Or the useHistory() hook as in this example from the docs:
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>
);
}
Using react-router v6 you can navigate imperatively using useNavigate hook:
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>
You can use the useNavigate hook to navigate programmatically from one route to another.
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>
);
}