React アプリ開発の悩みを解決！React Router v4 での「Cannot GET url」エラーの全貌

2024-06-25

React Router v4 で "Cannot GET url" エラーが発生する場合は、通常、クライアント側ルーティングとサーバー側ルーティングの不整合が原因です。このエラーは、ブラウザが URL をリロードまたは直接入力した場合に発生する可能性があります。

原因

このエラーが発生する主な原因は以下の 2 つです。

解決策

このエラーを解決するには、以下の 2 つの方法があります。

クライアント側とサーバー側のルーティングを両方設定する

これは、最も一般的な解決策であり、以下の手順で実行できます。

サーバー側ルーティング: サーバー側でルーティングを構成し、すべての URL を /index.html にリダイレクトします。これにより、ブラウザがどの URL にアクセスしても、React アプリケーションがロードされます。
クライアント側ルーティング: React Router を使用して、クライアント側でアプリケーションのルーティングを定義します。

サーバー側ルーティングのみを使用する

この方法は、クライアント側ルーティングを使用しない場合に適しています。以下の手順で実行できます。

サーバー側ルーティング: サーバー側でルーティングを構成し、すべての URL を適切な React コンポーネントにマッピングします。
クライアント側ルーティング: React Router を使用せずに、ブラウザの履歴 API と JavaScript を使用してルーティングを処理します。

補足

この問題は、create-react-app などのツールを使用している場合に特に発生する可能性があります。これらのツールは、デフォルトでクライアント側ルーティングのみを設定するためです。
サーバー側ルーティングを使用する場合は、Express などのフレームワークを使用すると便利です。
React Router v6 では、この問題はデフォルトで解決されています。

サーバー側 (Express)

const express = require('express');
const path = require('path');

const app = express();
const port = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

クライアント側 (React)

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

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

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

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

export default App;

const express = require('express');
const path = require('path');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

const app = express();
const port = process.env.PORT || 3000;

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

app.get('*', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>React App</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

const React = require('react');
const ReactDOM = require('react-dom');

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

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

注:

上記のコードはあくまで例であり、実際のアプリケーションでは必要に応じて変更する必要があります。
サーバー側ルーティングを使用する場合は、React の server-side rendering 機能を使用する必要があります。
詳細については、React Router v4 のドキュメントを参照してください。

React Router v4 で "Cannot GET url" エラーを解決するその他の方法

historyApiFallback オプションを使用する

Webpack 設定

module.exports = {
  // ...
  devServer: {
    historyApiFallback: true
  }
  // ...
};

説明:

利点:

設定が簡単です。

サーバー側ルーティングの機能が制限されます。
ブラウザの履歴 API を使用しないため、SEO に影響を与える可能性があります。

BrowserRouter の basename オプションを使用する

React コード

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = () => {
  // ...
};

const About = () => {
  // ...
};

const App = () => {
  return (
    <BrowserRouter basename="/my-app">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

basename オプションを使用して、React Router のベース URL を設定できます。これにより、すべてのルートパスにベース URL が追加されます。

サブディレクトリにデプロイする場合に便利です。

HashRouter を使用する

import React from 'react';
import { HashRouter, Routes, Route } from 'react-router-dom';

const Home = () => {
  // ...
};

const About = () => {
  // ...
};

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

export default App;