【React(TypeScript)】React Routerで画面遷移前にログインチェックなどの共通処理を入れる

概要

画面遷移前にログインチェックを入れたいという要件はまあまああると思います。調べてみると色々やり方はあるようですが、比較的簡単にやる方法が分かりましたのでマイベストプラクティスとして共有させていただきたいと思います。

やり方

ログインチェックし画面遷移先を制御するコンポーネントを作成して、React Routerでログインチェックを入れたい画面をこれで囲みます。

Router.tsx

ログイン済みであるかを判定し、結果に応じて画面遷移先を制御するコンポーネント（PrivateRoutes）を作成します。ログイン済みチェックを入れたい画面（例：<Route path="home" element={<Home />} />）をこれで囲みます。
PrivateRoutesの<Outlet />はRouteを表しています。つまり、Outletをreturnするということは、通常どおり画面遷移を行うということなります。一方、NavigateをreturnすればRouteの画面遷移ではなく、Navigateで指定された画面遷移を行うということになります。

const PrivateRoutes = () => {
  // 未ログインチェック
  // （isLoginを判定する処理は省略してます）
  if (isLogin === false) {
    return (
      <Navigate to='/signin' />
    )
  }
  return <Outlet />
}

const Router = () => (
  <BrowserRouter>
    <Routes>
      <Route path="signin" element={<SignIn />} />
      {/* PrivaeRoutes内に設定された画面はサインインが必須になる */}
      <Route element={<PrivateRoutes />}>
        <Route path="home" element={<Home />} />
      </Route>
      <Route path="*" element={<Error404 />} />
    </Routes>
  </BrowserRouter>
)

export default Router