react-router-dom v6でログインしているユーザーだけがアクセスできるようにする(ネストにしても画面が変わらない)

はじめに

Webサイトを作るのに必要なログイン部分に時間を使ったのでまとめていきます
react-router-dom v6に対応しています

問題

react-router-dom v6を利用しています
Recoil(useContext)でグローバルにisLoginというフラグを用意して、trueの時にはログイン済みとして、falseの時はログイン後の画面に直接アクセスするとログイン画面にリダイレクトするようにしたいです

解決方法

以下のように設定することで実現できました

Authenticated.tsx

import React from "react";
import { Outlet } from "react-router-dom";

export const Authenticated = () => {
  return (
    <>
      <Outlet />;
    </>
  );
};

router.tsx

      <Route
        path="/"
        element={
          isLogin ? <Authenticated /> : <Navigate to="/sign_in" replace />
        }
      >
        <Route index element={<Home />} />
        <Route path="setting" element={<Setting />} />
      </Route>

ポイントは<Outlet />を利用することでした
Routerでネストにしたときにネストしたコンポーネントが表示されるのは`と書いたところです
これを書かないとネストしても画面が変わらないという現象が起きるので注意が必要です

なので、の箇所がURLによって切り替えられるようにしました

ログインしているユーザーだけがアクセスできるようにする仕組みはelementの箇所で3項演算することで制御しています

おわりに

思ったよりも実現に時間がかかりました
誰かの参考になればと思います

参考