【エラー解決方法】react-router-dom:v6「A <Route> is only ever to be used as the child of <Routes> element・・・」

概要

• React+TypeScriptでログイン中かどうかを判別し、ログイン時は Home コンポーネント、非ログイン時は SignUp、SignIn コンポーネントにを表示するように実装していく際にreact-router-domのバージョン(v5→v6)で遭遇したエラーの解決手順を紹介するものです。
• Router.tsxでそれぞれのコンポーネントのルーティングを作成して、そのルーティングをログイン時と非ログイン時で切り分けていきます。

参考記事

以下の記事を参考にログイン判定の機能をuseContextを使って実装しました。

https://qiita.com/kazama1209/items/caa387bb857194759dc5

実装前

Router.tsx

export const Router: FC = memo(() => {
  return (
    <Routes>
      <Route path="signup" element={<SignUp />} />
      <Route path="signin" element={<SignIn />} />
      <Route path="home/user_management" element={<UserManagement />} />
      <Route path="home/user_management/:userId/list" element={<Lists />} />
      <Route path="*" element={<Page404 />} />
    </Routes>
  )
})

実装後

Router.tsx

export const Router: FC = memo(() => {
  const auth = useContext(AuthContext);
  const Private = ({ children }: { children: React.ReactElement }) => {
    if (!auth.loading) {
      if (auth.isSignedIn) {
        return children
      } else {
        return <Navigate to="/signin" />
      }
    } else {
      return <></>
    }
  }
  return (
    <Routes>
      <Route path="signup" element={<SignUp />} />
      <Route path="signin" element={<SignIn />} />
        <Private>
		  <Route path="home/*" element={<Home />}/>
        </Private>
      <Route path="home/user_management" element={<UserManagement />} />
      <Route path="home/user_management/:userId/list" element={<Lists />} />
      <Route path="*" element={<Page404 />} />
    </Routes>
  )
}

エラー

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

上記のエラーを日本語訳すると

Routeは要素の子としてのみ使用され、直接レンダリングされることはありません。RouteはRoutesでラップしてください。

Routesコンポーネントの子要素はRouteコンポーネントのみ使えるという意味です。

修正後

Router.tsx

export const Router: FC = memo(() => {
  const auth = useContext(AuthContext);
  const Private = ({ children }: { children: React.ReactElement }) => {
    if (!auth.loading) {
      if (auth.isSignedIn) {
        return children
      } else {
        return <Navigate to="/signin" />
      }
    } else {
      return <></>
    }
  }
  return (
    <Routes>
      <Route path="signup" element={<SignUp />} />
      <Route path="signin" element={<SignIn />} />
	   <Route path="home" element={
        <Private>
          <Home />
        </Private>
      } />
    </Routes>
  )
})

その他

react-router-domバージョン6の詳しい情報はhttps://remix.run/blog/react-router-v6
を参照してください。