토이 프로젝트 진행 중 router를 이용해서 Link to가 아닌, 특정 상황에서 input button을 클릭해서 fetch된 데이터를 전달해야하는 경우가 생겼다.

🍕 샘플 코드

path 설정해주기

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Detail from "./pages/Detail";

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Routes>
    	...
        <Route path="/detail" element={<Detail />} />
        ...
      </Routes>
    </BrowserRouter>
  );
};

export default App;

데이터를 보낼 컴포넌트

useNavigate를 사용해서 가공된 데이터를 state로 보내준다.

...
import { NavigateFunction, useNavigate } from "react-router-dom";

const URL : string = "fetch로 데이터를 가져올 URL"
const querystring : string = "쿼리스트링으로 사용할 string"
const navigate: NavigateFunction = useNavigate();

const fetchData = async (): Promise<Data[] | void> => {
  return fetch(URL).then(async (_res) => {
    // response error
    if (!_res.ok)
      throw new Error(`HTTP Error : status code is ${_res.status}`);
    // json 형태로 데이터 가공
    const _json = await _res.json();
    // navigate로 가공된 데이터 json 전달하기
    navigate(
      {
        pathname: "/detail",
        search: `?querystring=${querystring}`,
      },
      { state: _json }
    );
  });
};
  useEffect(() => {
    fetchData()
  }, [])
...

데이터를 받는 컴포넌트

state로 받아온 데이터는 state.XXX로 접근 가능하다.

interface RouteState {
  state: Data;
}

const Detail = () => {
  const state = (useLocation() as RouteState).state;
  
  return (
    <div>
    	<span>{state.data1}</span>
    	<span>{state.data2}</span>
    	<span>{state.data3}</span>
    	<span>{state.data4}</span>
    	<span>{state.data5}</span>
    </div>
  );
};

export default Detail;

데이터가 이동 후 잘 넘어오는지 확인하고 싶은 경우, 데이터를 받는 컴포넌트에서 console.log(state)와 같이 출력해보자.