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
...
와 감사합니다ㅜㅜㅜ
답변을 작성하시기 전에 로그인 해주세요.
