[Router] 페이지 간에 값 넘겨주기

배경

캠페인 목록에서 개별 캠페인을 누르면 상세 페이지가 나오도록 구현하고 있었다. 개별 캠페인을 조회하는 API가 존재하고 있었으므로, 상세 페이지가 나타날 때 데이터를 GET으로 불러와 화면을 구성하기로 하였다. 그런데 캠페인을 식별할 수 있는 id 데이터 값은 목록 조회 페이지가 가지고 있는 상태이다. 이를 상세 페이지로 넘겨줘야 핀포인트 API 호출이 가능하다. 이 때 url을 통해 넘겨주기로 하였다.

해결책

• react Router 공식 홈페이지

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";

// All route props (match, location and history) are available to User
function User(props) {
  return <h1>Hello {props.match.params.username}!</h1>;
}

ReactDOM.render(
  <Router>
    <Route path="/user/:username" component={User} />
  </Router>,
  node
);

공식 페이지를 참고하여 아래와 같이 코드를 작성했다. 그러나 이후 어떻게 상세 페이지에서 id 값을 빼내서 쓸 수 있는지 전혀 감이 오지 않았다...

:id는 대체 뭘까...?
-> <Route path={`${path}/:id/detail`} component={CampaignDetail}>로 코드를 수정하면 CampaignDetail 컴포넌트에서 match props를 불러와서 match.param.id로 받아올 수 있다.

Referench

• React에서 match와 props

match는 route -> component로 변수를 넘길 때 사용합니다.

(가져와야 하는 변수가 있다면) Route의 path 속성에 콜론(:)으로 인자를 주면 됩니다.

(사용하고자 하는 컴포넌트에서) match라는 필드를 사용하면 됩니다.
match.params.menu 에 App.js에서 작성한 menu 변수를 가져올 수 있습니다.