리액트로 동적라우팅 구현하기

지정되어있는 주소로 이동하는건 react-router-dom에 있는 ROUTER와 LINK로 구현한다. 매번 파라미터가 바뀌는 페이지로 이동하려면 동적 라우팅을 구현해야한다.

Path Parameter

라우트 경로 끝에 매번 바뀌는 id값을 저장한다.

boardRouter.js
router.post("/viewBoard/:id", boardController.viewBoard);

useNavigate

navigate 함수의 첫번째 인자에 이동하고 싶은 경로를 넣어주고,

두번째 인자의 state속성엔 전달하고 싶은 정보를 파라미터에 넣어서 전달할 수 있따.

여기에선 타이틀을 클릭하면 해당 게시글로 이동하도록 함수를 생성했다.

//boardItem.jsx
import { useNavigate } from "react-router-dom";

const BoardItem = ({ num, data }) => {
  const navigate = useNavigate();
  const dateNum = data.createdAt.split("T")[0];

  const handleClick = async () => {
    navigate(`/board/viewBoard/${data.id}`);
  };
  return (
    <tr key={data.id}>
      <td onClick={handleClick}>{data.boardText}</td>
      <td>{data.u_id}</td>
      <td>{dateNum}</td>
      <td>0</td>
      <td>0</td>
    </tr>
  );
};

useParams

파라미터에서 내가 보낸 id값을 받아오는 useParams

받아온 id값으로 axios와 통신해서 데이터를 받아와서 사용한다.

//boardView.jsx
import { useParams } from "react-router-dom";

const params = useParams();
const id = params.id;
console.log('id : ',id)

useLocation

navigate의 두번째 인자를 사용해서 정보를 보낼 경우, useLocation을 통해서 전달받은 파라미터를 얻을 수 있다.

// 전달
const handleClick = async () => {
  navigate(`/board/viewBoard/${data.id}`, { state: { data:data } });
};


// 받음
import { useLocation } from "react-router-dom";
const location = useLocation();
const boardValues = location.state.data;
 

export default BoardItem;

침고: https://hancoco.tistory.com/m/309