React Router에서 마이그레이션 체크리스트

UI가 비어 있다면 콘솔을 열어 보세요. 아마 cannot use 'useNavigate' outside of context와 비슷한 오류가 표시될 것입니다. 이는 아직 가져오거나 참조하는 React Router API가 남아 있으므로 찾아서 제거해야 한다는 뜻입니다. 모든 React Router 가져오기를 찾는 가장 쉬운 방법은 react-router-dom을 제거하는 것입니다. 그러면 파일에 TypeScript 오류가 표시되어 @tanstack/react-router 가져오기로 변경해야 할 부분을 알 수 있습니다.

다음은 예시 저장소입니다.

• Router 설치 - npm i @tanstack/react-router (자세한 설치 가이드 참고)
• 선택 사항: 가져오기에 TypeScript 오류가 표시되도록 React Router를 제거합니다.
  • 이 시점에 점진적 마이그레이션이 가능한지는 확실하지 않지만, 여러 라우터 provider를 사용할 수 있을 것으로 보이며 이는 바람직하지 않습니다.
  • React Router와 TanStack Router의 API는 매우 유사하므로, 회사의 작업 방식에 따라 한두 번의 스프린트 주기로 처리할 수 있을 가능성이 큽니다.
• 기존 React Router 라우트마다 라우트를 만듭니다.
• 루트 라우트를 만듭니다.
• 라우터 인스턴스를 만듭니다.
• main.tsx에 전역 모듈을 추가합니다.
• main.tsx에서 React Router의 (createBrowserRouter 또는 BrowserRouter), Routes, Route 컴포넌트를 모두 제거합니다.
• 선택 사항: 사용자 지정 설정/provider를 위해 render 함수를 리팩터링합니다. 위에서 참조한 저장소에 예시가 있습니다. 이는 Supertokens의 경우에 필요했습니다. Supertoken은 React Router를 사용할 때와 다른 모든 React 구현을 사용할 때의 설정이 다릅니다.
• RouterProvider를 설정하고 router를 prop으로 전달합니다.
• React Router의 모든 Link 컴포넌트를 @tanstack/react-router의 Link 컴포넌트로 교체합니다.
  • 리터럴 경로로 to prop을 추가합니다.
  • 필요한 경우 params prop을 params={{ orderId: order.id }}와 같이 추가합니다.
• React Router의 모든 useNavigate 훅을 @tanstack/react-router의 useNavigate 훅으로 교체합니다.
  • 필요한 경우 to 속성과 params 속성을 설정합니다.
• React Router의 Outlet을 @tanstack/react-router에 해당하는 컴포넌트로 교체합니다.
• React Router의 useSearchParams 훅을 사용한다면 검색 매개변수 기본값을 Route 정의의 validateSearch 속성으로 이동합니다.
  • useSearchParams 훅 대신 @tanstack/react-router Link의 search 속성을 사용해 검색 매개변수 상태를 업데이트합니다.
  • 검색 매개변수를 읽으려면 다음과 같이 작성할 수 있습니다.
    • const { page } = useSearch({ from: productPage.fullPath })
• React Router의 useParams 훅을 사용한다면 가져오기를 @tanstack/react-router에서 가져오도록 변경하고, params 객체를 읽을 리터럴 경로 이름으로 from 속성을 설정합니다.
  • 예를 들어 경로 이름이 orders/$orderid인 라우트가 있다고 하겠습니다.
  • useParams 훅은 다음과 같이 설정합니다. const params = useParams({ from: "/orders/$orderId" })
  • 그런 다음 주문 ID에 접근하려는 곳에서 params 객체의 params.orderId를 가져옵니다.