[React] Link/Navigate로 데이터 전달하기

김정현·2022년 11월 28일
0

기타

목록 보기
10/25

Link와 Navigate를 통해 페이지를 이동 할 때
state 속성으로 데이터(props)를 전달할 수 있다

Link는 중괄호를 두 번 사용하고,
Navigate는 중괄호를 한 번 사용한다

//Link 데이터 전달 예시
<Link to="/page" state={{ key: value }} />;

//Navigate 데이터 전달 예시
let navigate = useNavigate();
navigate("/page", { state: value });
// 데이터를 받는 페이지
import React from "react";
import { useLocation } from "react-router-dom"; // props를 받기 위하여 import

function dataCheck() {
	const location = useLocation();
	const user1 = location.state.key; // Link를 통해 props받기
    const user2 = location.state // Navigate를 통해 props 받기

	console.log(user1);
    console.log(user2);
    }
profile
개발 공부 블로그

0개의 댓글