React Routerでの「Matched leaf route at location "/" does not have an element」エラーの解決方法

問題の概要

React Router v6を使用している際に、次のようなエラーメッセージが表示されることがあります：

Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page

このエラーは、ルート設定に要素（コンポーネント）が正しく指定されていない場合に発生します。特に、React Routerのバージョンアップに伴うAPI変更が主な原因となっています。

原因

このエラーが発生する主な原因は以下の通りです：

React Router v5からv6への移行時のAPI変更
component プロパティの代わりに element プロパティを使用する必要がある
コンポーネントをJSX要素として渡す必要がある

解決方法

基本的な修正方法

React Router v6では、ルート定義の方法が変更されました。以下のように修正してください：

jsx

// ❌ 間違った書き方（v5スタイル）
<Route path="/" component={Home} />

// ✅ 正しい書き方（v6スタイル）
<Route path="/" element={<Home />} />

完全な修正例

以下のコード例は、正しいReact Router v6の使用方法を示しています：

jsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

その他の注意点

タイプミスに注意

element プロパティのスペルミスもこのエラーの原因となります：

jsx

// ❌ 間違ったスペル
<Route path="/mygames" elemen={<MyGames />} />

// ✅ 正しいスペル
<Route path="/mygames" element={<MyGames />} />

ネストされたルートの確認

親ルートと子ルートの構造が正しく設定されているか確認してください。親ルートが子ルートを正しくレンダリングするために Outlet コンポーネントを使用していることを確認しましょう。

jsx

import { Outlet } from 'react-router-dom';

const Layout = () => {
  return (
    <div>
      <nav>ナビゲーション</nav>
      <Outlet /> {/* 子ルートがここに表示されます */}
    </div>
  );
};

// ルート設定
<Route path="/" element={<Layout />}>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />
</Route>

よくある間違い

WARNING

React Router v6では、component プロパティは廃止されました。代わりに element プロパティを使用してください。

WARNING

コンポーネントを変数として渡すのではなく、JSX要素として渡す必要があります：

{Home} → {<Home />}

まとめ

「Matched leaf route at location "/" does not have an element」エラーは、主にReact Router v6への移行時の設定ミスによって発生します。以下のポイントを確認してください：

component の代わりに element プロパティを使用する
コンポーネントをJSX要素として渡す（{<Component />}）
タイプミスがないか確認する
ネストされたルートの構造を正しく設定する

これらの修正を行うことで、エラーは解消され、React Routerが正常に動作するようになります。

参考資料：React Router v6 公式ドキュメント

関連記事

React Routerでの「Matched leaf route at location "/" does not have an element」エラーの解決方法 ​

問題の概要 ​

原因 ​

解決方法 ​

基本的な修正方法 ​

完全な修正例 ​

その他の注意点 ​

タイプミスに注意 ​

ネストされたルートの確認 ​

よくある間違い ​

まとめ ​