MSWの準備前にreact-router-domのloaderが動いてしまったことに対応したメモ

概要

react-router-domのloaderの通信がMSWが準備される前に始まってしまう問題があった。
Issueに解決法が乗っていたのでメモする。

コミット

原因

loaderはcreateBrowserRouterが作成されたときに実行される。
下記のように、MSWを準備する前にcreateBrowserRouterを行っていた

router/index.tsx

export const router = createBrowserRouter(

対応

router/index.tsx

export const createRouter = () =>  createBrowserRouter(

router/RoutesApp.tsx

- import { router } from '.';
+ import { createRouter } from '.';
export function RoutesApp() {
+  const router = useMemo(() => createRouter(), []);
  return <RouterProvider router={router} future={{ v7_startTransition: true }} />;
}

main.tsx

+ await initMSW();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={gameCoreStore}>
    <React.StrictMode>
      <RoutesApp />
    </React.StrictMode>{' '}
  </Provider>,
);