게시판 목록을 만들고, 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