만약 UI가 빈 화면으로 나타나고 콘솔에서 cannot use 'useNavigate' outside of context와 비슷한 오류를 확인할 수 있다면, React Router API가 여전히 import되고 참조되고 있음을 의미합니다. 모든 React Router import를 찾는 가장 쉬운 방법은 react-router-dom을 제거하는 것입니다. 그러면 파일에서 TypeScript 오류가 발생하며 어떤 부분을 @tanstack/react-router import로 변경해야 하는지 알 수 있습니다.

여기 예제 저장소 (opens in a new tab)가 있습니다.

• Router 설치 - npm i @tanstack/react-router
• 선택 사항: React Router를 제거하여 import에서 TypeScript 오류를 확인합니다.
  • 현재로서는 점진적 마이그레이션이 가능한지 확실하지 않지만, 여러 라우터 제공자를 사용할 수 있을 것으로 보입니다. 이는 바람직하지 않습니다.
  • React Router와 TanStack Router 간의 API는 매우 유사하므로, 스프린트 주기 한두 번 안에 마이그레이션이 완료될 가능성이 높습니다.
• 기존 React Router 경로마다 Route를 생성합니다.
• 루트 Route를 생성합니다.
• 라우터 인스턴스를 생성합니다.
• main.tsx에 전역 모듈을 추가합니다.
• React Router (createBrowserRouter 또는 BrowserRouter), Routes, 그리고 Route 컴포넌트를 main.tsx에서 제거합니다.
• 선택 사항: 사용자 정의 설정/제공자를 위한 render 함수 리팩터링 - 위 참조 저장소에 예제가 포함되어 있습니다. 이는 Supertokens의 경우에 필요했습니다. Supertokens는 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 훅을 사용하는 경우, import를 @tanstack/react-router에서 가져오도록 업데이트하고 from 속성을 읽고자 하는 매개변수 객체의 경로 이름으로 설정합니다.
  • 예를 들어 경로 이름이 orders/$orderid인 라우트가 있다고 가정합니다.
  • useParams 훅에서는 다음과 같이 설정합니다: const params = useParams({ from: "/orders/$orderId" })
  • 그런 다음 매개변수를 액세스하고 싶을 때 params.orderId와 같이 사용할 수 있습니다.