React の更新時にページが見つからない場合はどうすればよいですか?

React の更新時にページが見つからない場合の解決策: 1. 「app.jsx」ファイルを見つけて開きます; 2. 「app.jsx」でルーティング プロトコルを定義するときに、「class App extends Component {」を渡しますrender () {return (e1c0a17a2781361d11c936c2de98a588a7f2cf15f06fbef780c6b2609731da81dc6dce4a544fdca2df29d5ac0ea9906be1190a8b4b0f1bd4c5e33451c93d253a117a224c00ca84aef0d015e294d20efe16b28748ea4df4d9c2150843fecfba68..." コードを定義するだけです。

##このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。ページが見つかりません。どうすればよいですか?

反応がデプロイされた後、ページを更新するとエラー メッセージが報告されます。ビューが見つかりません

今朝プロジェクトをデプロイした後、ルートをクリックしてジャンプできますが、対応するルートが更新されたときにエラーが報告されました。

Failed to lookup view "error" in views directory

プロジェクトはローカルでは正常に使用できますが、なぜですかサーバーにデプロイされた後に更新されるとエラーが報告されますか? 対応するビューが見つかりません?

最初にノードの構成ファイルを確認しました。反応プロジェクトの npm 実行ビルドの後、ビルドされたファイルは、ノードのパブリック ファイルに保存されます。このようにして、バックエンド ノード bin/www を起動した後、ノードのパブリック ファイルを読み取ることができます。その後、ノードの app.js ファイルの表示を開始します。ファイルはすべて設定されています

app.set('views', path.join(__dirname, 'views'));
app.engine('.html',require('ejs').__express);
// app.set('view engine', 'jade');
app.set('view engine', 'html');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public'))); //这句话就是express会读取public里面的静态文件

バックエンドにエラーがない場合は、フロントエンドのファイルの表示を開始します

ルーティング パスが間違っていたため、ルーティング関連の情報を検索したところ、答えが見つかりました。

BrowserRouter

エラーの原因:

クライアント側のルーティングとサーバー側のルーティングには違いがあります。フロントエンド自体によってレンダリングされるため、ホームページからブラウザ内の他のルーティング アドレスにジャンプします。React Router で対応するルートとスクリプトを定義しました。Web ページはバックグラウンドにアクセスするために更新されませんが、JS は場所を動的に変更します. 更新すると、最初にバックグラウンド アドレスにアクセスし、次に返されたページに React コードがロードされ、最後にブラウザで実行されます。つまり、この時点で 404 が報告された場合は、バックグラウンドではこのルートの HTML コンテンツが返されず、React Router を実行できないためです。

すべてのリクエストがページのindex.html に配置されるように、BrowserRouter ではなく HashRouter を使用してください。サーバー側での構成は必要ありません。

解決策:

app.jsx でルーティング プロトコルを定義する場合、次のように定義できます:

import React, { Component} from 'react';
 import { HashRouter  as Router  } from "react-router-dom";
 import Nav from './component/Menu/Menu';
 import FootContent from './component/Footer/Footer';
 import MinContent from './component/content/mainContent';
 import {Layout} from 'antd';
   class App extends Component {
     render() {
       return (
        <Layout className="layout">
        <Router>
        <div>
        <Nav  />
        <MinContent />
        </div>
      </Router>
      <FootContent />
      </Layout>
       );
     }
   }
 
   export default App;

推奨調査: "

リアクションビデオチュートリアル

>>

以上がReact の更新時にページが見つからない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。