react 다른 페이지에서 useNavigate 사용 에러

react 다른 페이지에서 useNavigate 사용 에러

QA

react 다른 페이지에서 useNavigate 사용 에러

본문

영화를 클릭했을때 해당 페이지에서 디테일 페이지가 뜨고, 오버레이를 클릭했을때 디테일 페이지가 사라지면서 원래 있던 페이지로 돌아가게 하고 싶습니다

 

'홈'에서는 되는데 '주말! 한번에 몰아보기'와 'NEW! 요즘 대세 콘텐츠' 페이지에서 할려니 에러가 나네요,,

유저가 오버레이를 클릭하면 유저가 해당 페이지에 있는 경로로 다시 돌아가게 하고 싶습니다ㅜㅜ

 

https://github.com/beom-jun-kim/beeflix

깃헙 주소입니다!

 

// detail.tsx

const matchModalBox = useMatch("videos/:videoId");

const clickedMovie =

    matchModalBox?.params.videoId &&

    moviesData?.results.find(

      (movie: any) => movie.id + "" === matchModalBox.params.videoId

    );

이 부분을 삼항연산로 해서 동적인 경로를 생성하면 될 것 같은데 어렵네요ㅜㅜㅜ

이 질문에 댓글 쓰기 :

답변 1

src/Components/detail.tsx


...
// import { useMatch, useNavigate, useLocation } from "react-router-dom";
import { useMatch, useParams, useNavigate, useLocation } from "react-router-dom";
...
  // const matchModalBox = useMatch("videos/:videoId");
  const params = useParams();
  const nowPath = useMatch(location.pathname);
...
  const overlayClicked = (videoId: any) => {
    // const currentPath = location.pathname;
    // const path = `videos/${videoId}` ? "/" : `${currentPath}`;
    // navigate(path);
    navigate(-1);
  };
 
  // const clickedMovie =
  //   matchModalBox?.params.videoId &&
  //   moviesData?.results.find(
  //     (movie: any) => movie.id + "" === matchModalBox.params.videoId
  //   );
  const clickedMovie = params.videoId &&
    moviesData?.results.find(
      (movie: any) => movie.id == params.videoId
    );
...
  return (
    <>
      <AnimatePresence>
        {/*matchModalBox*/params.videoId ? (
          <>
...
                <DetailMovie
                  layoutId={
                    /*matchModalBox.*/params.videoId
                      ? /*matchModalBox.*/params.videoId
...
답변을 작성하시기 전에 로그인 해주세요.
전체 39
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT