React 라우트 파라미터 바뀌어도 같은 컴포넌트 재렌더링 안 되는 문제 😫

React Router v6에서 와일드카드 경로 파라미터 바뀔 때 같은 컴포넌트 재렌더링하는 방법 알려줘. useEffect 의존성 배열에 path 넣었는데도 안 되고, 두 번째 useEffect가 이전 상태값으로 실행되는 문제도 있어

카테고리 페이지 만들다가 진짜 머리 터질 뻔 했어요...

category/mens에서 category/mens/tshirts로 이동하면 컴포넌트가 재렌더링이 안 되는 거예요. 근데 URL 직접 치고 들어가면 데이터 잘 나오고요. 이게 뭔가 싶어서 한참 들여다봤는데 😤

라우트 설정은 이렇게 되어있고요:

<Route path="/category/*" element={<CategoryPage />} />

컴포넌트에서 useEffect 의존성 배열에 path 넣어뒀는데도 안 되더라고요.

더 파고들어보니까 진짜 문제는 두 번째 useEffect였어요. 하위 카테고리 가져오는 로직인데, path랑 currentPath 다 의존성에 넣었는데도 이전 category._id로 실행되고 있는 거예요 🤦‍♂️

useEffect(() => {
  const fetchCategories = async () => {
    // 여기서 category._id가 이전 값으로 들어옴...
    const response = await axios.get(`/categories/nested/${category._id}`);
  }
  if((category && !categories && !loading) || path!==currentPath){
    fetchCategories();
  }
}, [categories, loading, category, path, currentPath]);

결국 URL은 바뀌었는데 화면은 상위 카테고리 데이터 그대로 보여주는 황당한 상황이 연출됐습니다 😂

혹시 비슷한 상황 겪어보신 분 있으신가요? 제가 key prop으로 컴포넌트 아예 강제 리마운트 시키는 방식 써야 하나 고민 중인데... 더 깔끔한 방법이 있을 것 같아서요.