게시판글 상세 페이지 연결

삽질...

onClick을 이용해 useNavigate로 상세페이지 연결을 해주려고 했는데 렌더링될때마다 limit의 개수 만큼 한 페이지에 해당되는 데이터를 받아오다보니, 데이터의 id도 페이지가 바뀔때마다 바뀌는 문제가 발생했다.

  const handleLoadAll = async (page) => {
    await axios
      .get(
        `https://jsonplaceholder.typicode.com/comments?_page=1&_limit=${limit}`
      )
      .then((res) => {
        const arr = res.data;
        console.log(arr);
        const total = res.headers.get("x-total-count"); // 500
        setItems(arr);
        // arr.map((el) => item2.push(el.id));
        // console.log(item2);
        // console.log(res);
      })
      .catch((err) => {
        console.log(err.response);
      });
  };

          <PostsList>
            {items
              .filter((item) => {
                if (searchTerm === "") {
                  return item;
                } else if (item.name.includes(searchTerm)) {
                  return item;
                }
              })
              .map((item) => {
                // console.log(item.id);
                // const handleTitleClick = (item) => {
                //   // navigate(`/view2/${questionItem.questionId}`);
                //   navigate(`/view2/${item.id}`);
                // };
                return (
                  <Post key={item.id}>
                    <PostHead>
                      <PostHeadBox>정보</PostHeadBox>
                    </PostHead>
                    <PostTitleBox>
                      <PostTitle
                        onClick={handleTitleClick}
                        className="ellipsis"
                      >
                          {item.name}
                        </StyledLink>
                      </PostTitle>

                      <PostComment>[1]</PostComment>
                    </PostTitleBox>
                    <PostDate>22/01/04</PostDate>
                    <PostView>123</PostView>
                    <PostLike>15</PostLike>
                    <PostWriter>{item.id}</PostWriter>
                  </Post>
                );
              })}
          </PostsList>

해결

onClick을 쓰려다보니, 계속 헤맸는데
Link to를 쓰면 해결되는 문제였다😂

                    <PostTitleBox>
                      <PostTitle className="ellipsis">
                        <StyledLink to={`/view2/${item.id}`}>
                          {item.name}
                        </StyledLink>
                      </PostTitle>

상세페이지 연결이 잘 되는 것을 확인할 수 있다.