Reactでreact-router-domを使用しているがPOSTリクエストが「Cannot POST /xxxxx」となってしまう。

Question

GETリクエストだと正常に文字列「test」がブラウザに表示されるのですが、
POSTリクエストだと
「Cannot POST /xxxxx」
という風に表示されてしまいます。
どのようにすればPOSTでのリクエスト時にページを表示出来るでしょうか？

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

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path={'/xxxxx'} element={<p>test</p>} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

Comments

[hoshi-takanori]

えっと、その GET とか POST とかはいわゆる AJAX ですか？ それとも画面遷移ですか？ (react-router を使うなら画面遷移そのものでは GET も POST もしないはず…)

[f6ae]

AJAXか画面遷移かというのが、よく意味がわかっておりませんが、
外部から/xxxxxに対してPOSTリクエストをした時ということです。
たとえば
cur localhost:3000/xxxxx
とGETでリクエストを送った場合はtestという文字列が返ってきますが、
curl -X POST localhost:3000/xxxxx
としたときに、
「Cannot POST /xxxxx」と出てしまうということです。

[hoshi-takanori]

React は基本的にはブラウザ上で動くのですが、外部から POST するとは？？？

[f6ae]

すみません、前回のコメントについては正しくありませんでした。(curlではなくブラウザでのアクセス時とすべきでした。)
Reactの処理自体はサーバではなくブラウザ側で行われることは理解しているのですが、
たとえばFormのボタンをクリックしてSubmitで画面遷移をさせる場合などに、POSTリクエストで画面遷移となると思います。(たとえば/aaaaaから/xxxxxに画面遷移)
ここでPOSTされたデータを/xxxxxのReactの処理で取得する事が出来るのではと考えていたのですが、出来ないのでしょうか？
そしてそれ以前に、GETでのアクセスだろうがPOSTでのアクセスだろうが同じ画面表示（同じ処理）を行いたいのに、POSTだと「Cannot POST /xxxxx」となってしまうのも何故なのか理解出来ておりません。

[hoshi-takanori]

えっと、どこから説明したものか…。

まず、普通に a タグで <a href="/aaaaa"> のようにリンクを張ると、react-router の機能は発動せず、ブラウザは GET /aaaaa という HTTP リクエストを行い、新しいページに遷移してしまいます。これを防ぐために、react-router では a タグは使わずに <Link to="/aaaaa"> のように書きます。これにより、react-router は HTTP リクエストを発行せずに画面を書き換えると同時に、ブラウザ上で履歴を操作して新しいページに遷移したように見せかけます。

同様に、普通に form タグを使って <form method="GET" action="/xxxxx"> として送信ボタンを押すと、ブラウザは GET /xxxxx という HTTP リクエストを行って新しいページに遷移することになります。

なお、この際、本来はサーバー側で /aaaaa や /xxxxx というリクエストに対応する HTML ファイルを用意しておく必要がありますが、react の開発環境 (create-react-app で作ったプロジェクトなど) では webpack-dev-server という開発用のサーバーが動いていて、/aaaaa や /xxxxx などの未知のリクエストに対してはデフォルトの index.html を返すので、何事もなかったかのように動きますが、実際にデプロイする際にはこの辺の仕組みも何とかする必要があります。

ところが、<form method="POST" action="/xxxxx"> の場合、GET ではなく POST /xxxxx という HTTP リクエストが行われ、webpack-dev-server は POST には対応してないのでエラーになります。というか、そもそも生の form タグを使って GET や POST を送信されてしまうのは react-router 的には間違いで、送信ボタンを押した際の処理を乗っ取って自分で処理する (または、その辺を何とかしてくれるライブラリを使う) 必要があります。

[yuta_22]

解決済みかもしれませんが、補足です^^

通常のウェブサイトではPOST後に画面遷移する挙動が入りますが、Reactでは全く違う考え方をする場合が多いです。
直前の方がおっしゃる通り、formのsubmitイベントを補足、submitイベントが発生した後に通常のsubmit処理（データをサーバーに送信 & リダイレクト）を完全にキャンセル、自前でサーバーにデータを送信、自前で別のページにリダイレクトさせる、という処理を行います。（最後のリダイレクトは、むしろやってもやらなくても良いです）

英語ですが、こちらのサイトの1つ目のサンプルコードがまさにそれです。（`event.preventDefault()`がデフォルトの処理をキャンセル、`navigate('/contacts')`がページ遷移）
https://bobbyhadz.com/blog/react-redirect-after-form-submit

また、formのsubmitイベントを補足する他に、formタグを使わず送信ボタンのclickイベントを補足する方法もあります。お作法的には前者の方が良いですが、後者の実装もよく見かけます。興味があれば調べてみてください！

[f6ae]

どうも有難うございます。
Reactの作法について再度勉強致します！

Answer 1

Reactの作法について再度確認します！