[React][1분만에 해결] react navigate param

안녕하세요, 송아지할때 송아 김송아입니다.

 

React-Spring 프로젝트 많이들 하실텐데요~!

쉽게 답을 찾지 못 했던 바로 React navigate param 즉, 리액트 navigate(다른, 다음 페이지로 이동)하면서 param(파라미터) 넘기기!

 

React 에서 다른 페이지로 이동하는 건 router와 navigate 합작으로 어떻게 하겠는데..

다른 페이지로 이동하면서 param 넘기는 데에 원하는 답이 잘 안나와서 애먹었습니다ㅠㅠ

 

여러분들은 제 글을 보시고 깔끔하게 1분만에 해결하시면 좋겠습니다!ㅎㅎ

 

---

그럼 시작하겠습니다! 1분 시~작! (째깍째깍) 👀

 

(본 게시글은 navigate와 router를 이해하고 계신다는 것을 가정하고 진행됩니다.)

 

navigate param 코드를 보여드리기 위해 크게 2단계로 나누겠습니다.

1단계. 이전 페이지
2단계. 다음 페이지

간단하쥬?

 

## 1단계. 이전 페이지 (값을 전달하는 페이지)

<샘플 코드>

import { useNavigate } from 'react-router-dom' 	// 1번 라인

const navigate = useNavigate();	// 2번 라인
navigate("다음페이지로 가는 router URL", {state : {값이름: 값}});  // 3번 라인

<예시 코드>

import { useNavigate } from 'react-router-dom' 	// 1번 라인

const navigate = useNavigate();	// 2번 라인
navigate("/result", {state : {orderId: 1}});  // 3번 라인

<코드 해설>

- 1번 라인 : useNavigate 훅을 사용하기 위한 import

- 2번 라인 : useNavigate 훅을 담은 함수 navigate

- 3번 라인 : navigate 함수 = 매개변수(param) 2개("router로 정해둔 다음페이지로 가는 URL", {state : {변수명: 값})를 담음
                  -->  예시 코드는 다음 페이지를 "/result"로 맵핑해두었습니다.
                  -->  orderId 변수(param)에 1을 담아 다음 페이지로 보냅니다.

 

 

## 2단계. 다음 페이지 (값을 받는 페이지)

<예시 코드>

import { useLocation } from 'react-router-dom' 	// 1번 라인

const {state} = useLocation();	// 2번 라인
const {orderId} = state;	// 3번 라인

 

 

<코드 해설>

예시 코드로 바로 비교해보세요 :)

 

- 1번 라인 : useLocation 훅을 사용하기 위한 import

- 2번 라인 : useLocation 훅을 통해 받아 온 state 통째로!

- 3번 라인 : state 안에 있는 key값을 꺼내시면 됩니다. 여기선 key값이 orderId 밖에 없죠?ㅎㅎ

 

 

 

이렇게 react navigate param 을 해결하는 방법을 정말 간단하고 정확하게! 1분만에 해결해봤습니다.

다음 페이지로 값 전달하기.. 저는 비록 1시간 걸렸지맠ㄴㅋㅋㅋㅋ 여러분은 제 글을 보신다면 꼭 1분만에 해결하셨으면 좋겠습니다 :)

 

그럼, 조금이나마 도움이 되셨길 바라며!

감사합니다!!