[React]리액트 라우터 URL 매개변수 읽기

게시판 목록을 만들고, detail View를 만들던 중

<Link to={`/study_main/${study.id}`} />

형식으로 넘긴 페이지에서 끝의 매개변수 값을 읽어
axios url에 넘기고 싶었다.

처음엔 state와 props를 이용할 생각이었으나 계속해서 NULL값이 나왔다.

React 라우터 공식문서를 읽어보니 라우터의 useParams함수를 이용해 쉽게 매개변수를 읽어올 수 있었다.

라우터가 다음과 같이 구성되어 있을 경우

<Route path="/study_main" element={<StudyMain />}>
	<Route index element={<StudyList />} />
    <Route path=":studyId" element={<Study />} />
</Route>

<StudyList> 컴포넌트에서 게시판 글의 목록을 불러오고, 하나의 게시판 글을 읽으면 detail 페이지로 넘어가기 위하여

<Link to={`/study_main/${study.id}`} />

<Link>태그로 묶어주었다.

넘어간 <Study> 페이지에서

import React, { useEffect } from 'react';
import axios from 'axios';
import { useParams } from 'react-router-dom';

const Study = () => {
  const params = useParams();

  useEffect(() => {
    const id = params.studyId;
    axios
      .get(`http://localhost:3001/study/studies/${id}`)
      .then((res) => {
        console.log(res.data);
      })
      .catch((error) => console.log('Network Error : ', error));
  });
  return <div></div>;
};

useParams.params이름 으로 쉽게 넘겨받은 매개변수 값을 읽어올 수 있었다!

GOOD~!

※ 참고 React 라우터 공식문서
https://reactrouter.com/docs/en/v6/getting-started/tutorial#reading-url-params