[React] 다른페이지로 파라미터 전달하기

파라미터 다른 페이지로 전송하기

    navigate('이동하려는 URL', {
      state: {
        key: 'value'
      }})
  }

 

1. 'react-router-dom'을 import 하기.

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

 

2. navigate 선언하기.

  const navigate = useNavigate();

 

3. onClick함수를 포함한 button 생성하기.

<button onClick={clickToMove}>클릭</button>

 

 

4. click to move 함수 정의하기.

  const clickToMove = () => {
    
    navigate('이동하려는 URL', {
      state: {
        key1: 'value1',
        key2: 'value2',
      }})
  }

 

다른페이지에서 보낸 파라미터 전달 받기

1. 'react-router-dom'을 import 하기.

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

 

2. location 선언하기.

  const location = useLocation();
  const obj = location.state; // 전달받은 파라미터를 obj안에 저장

 

3. view에 표현하기.

    <div>{obj.key1}</div>
    <div>{obj.key2}</div>

 

4. 결과

 

최종코드

1. 파라미터 보내는 페이지

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


const toTest=()=> {
  
  const navigate = useNavigate();

  const clickToMove = () => {

    navigate('URL', {

      state: {
        key1: 'value1',
        key2: 'value2',
      }})
  }

  return (  
      <button onClick={clickToMove}>클릭</button>
  );
}

export default toTest;

 

2. 파라미터 받는 페이지

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


const fromTest= () => {

  const location = useLocation();
  const obj = location.state;

  return (  
  	<div>
    	<div>{obj.key1}</div>
    	<div>{obj.key2}</div>
    </div>

  );
}

export default fromTest;

 

 

 

심화 (API 통신해서 파라미터에 값 넣고 받기)

1. 파라미터 보내는 페이지

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

const toTest=()=> {
  const [list,setList] = useState([]);
  const [selectedList,setSelectedList] = useState([]);
  const navigate = useNavigate();

  const requestOpt = {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
    })
  };

  // 1. 조회
  const getClick = () => {

    let body = JSON.stringify({
    })
    fetchGetList(body).then(items=>{
      setList(items.data);
    })
  }

  async function fetchGetList(data){
    requestOpt.body = data;
    const response = await fetch('API 주소',requestOpt);
    const items = await response.json();
    return items;
  }

  const detailClick = () => {
    var obj = new Object();
  
    selectedList.forEach(element => {
      obj.id = list[element.index].id;
      obj.title = list[element.index].title;
      obj.body = list[element.index].body;
    })
  
    navigate('URL', { state: obj })
  
  }


  return (  
    <div>
      <button
        onClick = {getClick}
      >조회</button>
      
      <button
        onClick = {detailClick}
      >상세보기</button>
    </div>
  );
}

export default toTest;

 

 

 

2. 파라미터 받는 페이지

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

const formTest= () => {

  const location = useLocation();
  const obj = location.state;

  return (  

    <div>
        <div>{obj.id}</div>
        <div>{obj.title}</div>
        <div>{obj.body}</div>
    </div>

  );
}

export default formTest;

 

 

 

 

참고글

https://curryyou.tistory.com/477