142. (응답) TIL23.03.14를 사용하도록 패스 상태 탐색

상태를 useNavigate로 전달

항목을 클릭했을 때 항목 세부 정보 페이지로 이동하는 방법을 찾고 있었습니다.
사용해보기Navigate
첫 번째 인수로 useNavigate 갈 주소두 번째를 얻을 인수로 {replace, state}받다.

사용

1. 라이브러리 설치

yarn add react-router-dom

2. 해당 항목을 클릭하면 useNavigate로 화면이 이동하며 상태도 통과됩니다.

//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. 수신 상태는 useLocation()으로 캡처됩니다.

//ItemDetail.jsx

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

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