ReactプロジェクトのBrowserRouterルーティングメソッド-------本番環境での404問題

BrowserRouterを使用する際の問題（スキーム：バックグラウンドでのカスタムミドルウェア、前提：フォアグラウンドとバックグラウンドでパスの重複がない）

a。問題：特定のルーティングパスを更新すると、404 エラー
が表示されます
b。理由：プロジェクトのルートパスの後のパスパスが、対応するバックグラウンドルーティングをリクエストするためのバックグラウンドルーティングパスとして使用されますが、
c はありません。表示するインデックスページを読み取って返すミドルウェアを定義します。注：フロントエンドルーティングのパスは、バックエンドルーティングパスと同じであってはなりません（リクエストメソッドも同じです）。

　　以下に示すように、ホームページにアクセスすると通常どおりアクセスできます

　　しかし、ページを更新すると問題が発生します

分析は次のとおりです。

　　分析：

1. localhost：5000 /＃/ homeの場合、プロジェクトのルートパスの下にあるファイル、つまり、パッケージ化されたindex.htmlファイルベースのSPAアプリケーションにアクセスします
 2.しかし、ここではlocalhost：5000 / homeがバックグラウンドで受信されますパス要求はバックグラウンドパスとして扱われ、バックグラウンドはルートを処理しません。そして、それをフロントエンドルートとして扱いたいと考えています。
3.ここでは、開発環境でアクセスを正常に更新できることに注意してください。開発環境ではWebpackサーバーであるため、常にindex.htmlを返します

　　次のように分析を続けます。バックエンドルーティングには対応する登録手順があります

　　次に、対応するルートがない場合は、カスタムミドルウェアを使用して、パッケージ化されたIndex.htmlページを読みます。

　　これで正常に更新できます

app.use（（req、res）=> { 
  fs.readFile（__ dirname + ' /public/index.html '、（err、data）=> {
     if （err）{ 
      console.log（err）
      res.send（' 后台错误' ）
    } else { 
      res.writeHead（200 、{
         ' Content-Type '：' text / html; charset = utf-8 ' 、
      }）; 
      res.end（data）
    } 
  }）
}）

具体的な手順は次のとおりです

1.送信されたリクエストがバックエンドに登録されたルートに存在しない場合、パッケージ化されたindex.htmlに対応するデータを読み取るために戻ります
2.つまり、フォアグラウンドにリクエストパスがあり、バックグラウンドで対応するリクエスト処理がない限り、フロントデスクに返されます。インデックス、htmlページ、ファイルはパスをフォアグラウンドルートとして処理します

コードは次のとおりです。

constの FS =（必要' FS ' ） 
 //は後に中間ルータに宣言する必要があります 
app.use（（REQ、RES）=> { 
    fs.readFile（__ dirnameは + ' /public/index.html '、（ERR、データ） => { 
         if （err）{ 
            console.log（err）
            res.send（' Background error ' ）
        } else { 
            res.writeHead（200 、{
              ' Content-Type '：' text / html; charset = utf-8 ' 、
        　　}）;
        　　res.end（data）
        } 
    }）
}）

。

ReactプロジェクトのBrowserRouterルーティングメソッド-------本番環境での404問題

おすすめ