[React] 버튼 클릭 이벤트 새로운 페이지로 이동하기 (button click to new page)

새로운 페이지 만들기

 

src/pages/PurchasePage.js

import React from "react";

const PurchasePage = () => {
  return <div>PurchasePage</div>;
};

export default PurchasePage;

 

 

useNavigate() 사용하기

 

참고 :

2022.07.20 - [javascript/React] - [React] React app - 시작 로고 페이지 만들기 (useNavigate, setTimeout())

 

navigateToPurchase 에서 navigate 함수를 호출해 주소를 전달한다.

navigate 함수에 인자로 주소를 넣어준다.

 

src/pages/ListProductsSalePage.js

  const navigate = useNavigate();

  const navigateToPurchase = () => {
    navigate("/purchase");
  };

 

 

onClick event에 함수 전달

 

버튼 onClick event에 위에서 선언한 arrow function navigateToPurchase 를 전달

 

src/pages/ListProductsSalePage.js 

          <Button size="large" onClick={navigateToPurchase}>
            구매하기
          </Button>

 

src/pages/ListProductsSalePage.js 전체코드

import * as React from "react";
import ProgressBar from "../components/ProgressBar";
import {
  Box,
  Card,
  CardActions,
  CardContent,
  Divider,
  Button,
  Typography,
} from "@mui/material";
import { useNavigate } from "react-router-dom";

const ListProductsSalePage = () => {
  const navigate = useNavigate();

  const navigateToPurchase = () => {
    navigate("/purchase");
  };

  return (
    <div>
      <br />
      <Card sx={{ minWidth: 275 }}>
        <CardContent>
          <Typography variant="h5" component="div">
            benevolent
          </Typography>
          <Typography variant="body2">
            well meaning and kindly.
            <br />
            {'"a benevolent smile"'}
          </Typography>
          <ProgressBar />
        </CardContent>
        <Divider />
        <CardActions>
          <Button size="large" onClick={navigateToPurchase}>
            구매하기
          </Button>
        </CardActions>
      </Card>
    </div>
  );
};

export default ListProductsSalePage;

 

import와 Route 추가

 

src/App.js

import PurchasePage from "./pages/PurchasePage";

	<Routes>          
          <Route path="/purchase" element={<PurchasePage />}></Route>
        </Routes>

 

 

실행 결과

 

구매하기 버튼 클릭 시 PurchasePage로 이동

 

 

다른 Hook 살펴보기

2022.12.02 - [javascript/React] - 페이지 이동 Hook useNavigate, useParams, useSearchParams

 

 

 

참고 :

https://reactrouter.com/en/main/hooks/use-navigate

https://ko.reactjs.org/docs/handling-events.html

https://bobbyhadz.com/blog/react-onclick-redirect