Error [DefaultLayout] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Last updated at 2026-01-08Posted at 2026-01-08

はじめに

Routeをほかのコンポーネントで挟むとエラーになった。

      <Routes>
        <DefaultLayout>
          <Route path="/" element={<Top />} />
        </DefaultLayout>
      </Routes>

RouteはRoutes以外で挟むとエラーが発生する。

古いReactバージョン(Ver5)では、Switchのコードで解決した

    <Switch>
　　　<DefaultLayout>
        <Route exact path="/">
          <Top />
        </Route>
　　　</DefaultLayout>
    </Switch>

今回はバージョン(Ver6)が違うため、

        <Route path="/" element={<DefaultLayout />} />

とした。
DefaultLayoutのコンポーネント内でTopコンポーネントを呼び出す方法にした。
結果、想定通りの挙動となった。

どのバージョンを使用しているかを確認しよう。
コンポーネントの関係も把握する。