페이지 이동 Hook useNavigate, useParams, useSearchParams

 페이지 이동 Hook
useNavigate, useParams, useSearchParams

 

useNavigate :

다른 페이지로 이동, 뒤로 가기 시 사용하는 hook.

  

    
    
    
    
  
import axios from "axios";
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";


const InfoProductSoldOutPage = () => {
  
  ...
  
  const navigate = useNavigate();

  return (
    <div>
      ...

      <Paper style={{ marginBottom: 50 }}>
        <Button
          size="large"
          variant="contained"
          onClick={() => navigate("/listSoldOut")}
        >
          돌아가기
        </Button>
      </Paper>
    </div>
  );
};

export default InfoProductSoldOutPage;

useParams, useSearchParams :

쿼리 스트링을 받아 오는 Hook

 

useParams :

전달된 Path variable을 useParams custom hook을 통해 가져와 페이지 이동

  

    
    
    
    
  
import { useParams } from "react-router-dom";

const InfoProductSoldOutPage = () => {
  const { goods_id } = useParams();
  ...
  useEffect(() => {
    axios
      .all([axios.get(`/product/order/${goods_id}`)])
      .then(
        axios.spread((res1) => {
          setDetailProduct(res1.data);
        })
      )
      .catch((error) => {
        console.log("error", error);
      });
  }, [goods_id]);
  
  ...
  
  return (
    <div>
      <Box
        sx={{
          display: "flex",
          "& > :not(style)": {
            m: 1,
            width: 1,
            minWidth: 300,
            minheight: 270,
          },
        }}
      >
        <Paper variant="outlined">
          <div>상품 {goods_id} 페이지</div>
			...
        </Paper>
      </Box>
	...
    </div>
  );
};

 

useSearchParams :

쿼리 스트링(name과 value를 엮어서 데이터를 전송)을 통해 url을 변경시킨다.

  

    
    
    
    
  
import { Link, useSearchParams } from "react-router-dom";

// 페이지 번호 버튼 클릭 시 현재 페이지를 받아 url에 현재 페이지 표시
const [searchParams, setSearchParams] = useSearchParams();
const ListProductsSalePage = () => {
...

    const handlePageChange = (currentPage) => {
      setCurrentPage(currentPage);
      console.log(currentPage);
      axios
        .get(`/product/on-sale`, {
        params: {
          page: currentPage - 1,
          size: postPerPage,
        },
      })
      .then((res) => {
        setProducts(res.data);
        setSearchParams({ page: currentPage });
        console.log("current page : ", searchParams.get("page"));
      })
      .catch((error) => {
        console.log("error", error);
      });
    };

    return (
        <div>
        ...
          <Paging
            page={currentPage}
            postPerPage={postPerPage}
            count={count}
            setPage={handlePageChange}
          />
        </div>
        )
      );
}

 

 

참고 :

https://velog.io/@haesoohaesoo/useParams-useLocation-useNavigate