[DAY32] TIL

Router 에서 id별로 상세페이지 연결하기

1. 필요한 패키지 설치

yarn add react-router-dom

useParams 이용함.

Router.js 파일 생성

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

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/:id" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

디테일 페이지 코드
리덕스에 해당 아이템의 정보가 저장돼있다고 가정했을 때
Detail.jsx

import React, { useEffect } from "react";
import styled from "styled-components";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
import { getTodoByID } from "../redux/modules/todos.js";

const Detail = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const todo = useSelector((state) => state.todos.todos);
  const { id } = useParams;

  
  // 이부분은 리덕스에 함수가 정의돼있는 관계로 주석으로만 메모하겠음.
  // useEffect(() => {
  //   dispatch(getTodoByID(id));
  // }, [dispatch, id]);

   const itemData = todos.find((item) => {
     return String(item.id) === String(params.id);
   });

  return (
    <StContainer>
      <StDialog>
        <div>
          <StDialogHeader>
            <div>ID :{todo.id}</div>
            <StButton
              borderColor="#ddd"
              onClick={() => {
                navigate("/");
              }}
            >
              이전으로
            </StButton>
          </StDialogHeader>
          <StTitle>{todo.title}</StTitle>
          <StBody>{todo.body}</StBody>
        </div>
      </StDialog>
    </StContainer>
  );
};

export default Detail;

2. useParams ?
   같은 컴포넌트를 렌더링하더라도 각각의 고유한 id 값을 조회할 수 있음
   path의 있는 id 값을 조회할 수 있게 해주는 Hook