How do you go to another page on button click in react?-CodePudding

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>
  
  
  );
}

CodePudding user response：

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>

CodePudding user response：

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>
  );
}