【初心者向け】React.jsのルートパスで発生するエラー「Matched leaf route at location "/" does not have an element」を解決する方法

2024-04-12

JavaScript、Node.js、React.jsにおける「Matched leaf route at location "/" does not have an element」エラー解説

ルートパス("/")にアクセスしようとしている
ルートパスに対応するコンポーネントが存在しない

それぞれの状況について、原因と解決策を詳しく説明します。

ルートパス("/")にアクセスしようとしている

React.jsアプリケーションでは、デフォルトでルートパス("/")はアプリケーション全体の入口となります。そのため、ルートパスにアクセスした際に、アプリケーションのメインコンポーネントが表示されるように設定する必要があります。

もし、ルートパスにアクセスした際に何も表示されない場合は、以下の原因が考えられます。

これらの原因を解決するには、以下の方法を試してみてください。

ルートパスに対応するコンポーネントは、通常、App.jsという名前で作成されます。このコンポーネントは、アプリケーション全体のレイアウトを定義します。

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

ルートパスに対応するコンポーネントは、index.jsファイルでインポートする必要があります。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

ルートパスに対応するコンポーネントを正しくレンダリングする

ルートパスに対応するコンポーネントは、ReactDOM.render()関数を使用してレンダリングする必要があります。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

ルートパスに対応するコンポーネントが存在しない場合、以下のエラーメッセージが表示されます。

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component.

このエラーを解決するには、ルートパスに対応するコンポーネントを作成し、export defaultを使用してデフォルトエクスポートする必要があります。

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

Error: Cannot render an element that is not a React element. This means that you're likely trying to render a component that hasn't been created yet, or that you're trying to render a class component as a functional component.

このエラーを解決するには、ルートパスに対応するコンポーネントが正しくレンダリングされていることを確認する必要があります。

コンポーネントが正しくインポートされていることを確認する

コンポーネントが正しくインポートされていることを確認するには、importステートメントを確認する必要があります。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

// App.js

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

このコードを実行すると、ブラウザに「Hello, World!」という文字が表示されます。

他の方法

<Switch>コンポーネントを使用すると、複数のルートパスを定義することができます。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>About</h1>
    </div>
  );
};

const NotFound = () => {
  return (
    <div>
      <h1>404 Not Found</h1>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

このコードでは、以下のルートパスが定義されています。

/: Homeコンポーネントを表示
それ以外: NotFoundコンポーネントを表示

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Redirect to="/" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));