142. [React] useNavigate로 state 넘기기 TIL23.03.14

---

 

useNavigate로 state 넘기기

해당 item을 누르면 itemDetail 페이지로 넘어가는 방법을 찾던 중 전에 사용했던
useNavigate 사용해봄
useNavigate는 첫 번째 인자로 내가 이동할 주소를 받고 두 번째 인자로 {replace, state}를 받음. 

 

 

사용하기

 

1. 라이브러리 설치

yarn add react-router-dom

 

2. 해당 item을 클릭했을 때 useNavigate로 화면이동하면서 state도 넘겨줌

//itemCard.jsx

import React from 'react';
import { useNavigate } from 'react-router-dom';

function itemcard({ items }) {
	const navigate = useNavigate(); //변수에 저장
        const ItemDetail = () => {
    	navigate(`/items/${items.id}`, {state:{items}}) //해당경로로 넘길때 state에 items도 담아서 넘겨줌
    }
    return (
    	<li onClick={ItemDetail}>
        	...
        </li>
    )
}

 

3. 전달받은 state는 useLocation()을 이용해서 취득함

//ItemDetail.jsx

import { useLocation } from 'react-router-dom';

function ItemDetail() {
	const {state: {product}} = useLocation(); //useLocation()훅으로 state를 받음
	return(
    	<p>{product.title}</p> //이렇게 사용하면됨
    )
}