[React Router v7 경고] React Router will begin wrapping state updates in React.startTransition in v7 / Relative route resolution within Splat routes is changing in v7

📌 React Router v7 경고 메시지

React Router v7로의 업그레이드를 준비하는 과정에서 발생하는 경고 메시지는 향후 버전에서의 변경 사항을 대비에 대한 안내

 

📍 React Router will begin wrapping state updates in React.startTransition in v7

- startTransition 기능이 React Router v7에서 상태 업데이트에 적용될 것이라는 알림(경고)

 

📗 해결 방법

 

<RouterProvider 
  router={router} 
  future={{ v7_startTransition: true }} // 추가
/>

 

📍 Relative route resolution within Splat routes is changing in v7

- React Router v7에서는 Splat 경로 내에서 상대 경로를 해석하는 방식이 변경될 예정이라는 알림(경고)

- React Router v6에서 상대 경로와 Splat 경로를 함께 사용할 때 예상과 다른 결과가 발생할 수 있습니다.

 

📗 해결 방법

v7_relativeSplatPath: true 옵션을 사용하여 새로운 방식에 대한 설정을 미리 적용

export const router = createBrowserRouter(
  [
    {
      path: "/",
      element: <App />,
      children: [
        ...routerList
      ],
      errorElement: <ErrorPage />
    },
    {
      path: "/*",
      element: <ErrorPage />
    },
  ],
  {
    future: {
      v7_relativeSplatPath: true, // 추가
    },
  }
);

 

📍 v7_startTransition: true와 v7_relativeSplatPath: true 두 옵션을 동시에 설정할 수 없는 이유

✅ v7_startTransition: true와 v7_relativeSplatPath: true는 각각 다른 위치에서 설정되기 때문에 같은 future 객체 내에서 동시에 사용할 수 없습니다.

 

- v7_startTransition은 RouterProvider의 future 옵션 내에서 설정

- v7_relativeSplatPath는 createBrowserRouter의 future 옵션 내에서 설정

 

✅ 경고가 사라진 것을 확인할 수 있어요.

경고를 무시해도 영향은 없고 경고문을 사라지게 하기 위한 해결방법이었습니다.

 

✍️ 기록

 

감사합니다. 😁