React-router 4.0 でサーバーが BrowserRouter とどのように連携するかに関するチュートリアルの例

react-router は、React フレームワークのルーティング ソリューションとして React プロジェクトで重要な役割を果たします。この記事では、react-router 4.0 でのサーバーと BrowserRouter の連携に関する詳細な説明を中心に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

react-router バージョン 4.0 では、以前のバージョンと比較して API が大幅に変更され、2.0 および 3.0 で一般的に使用されていた a7f2cf15f06fbef780c6b2609731da81 コンポーネントは、基礎となるルーティング構成コンポーネントとして使用されなくなりました。それぞれ異なるルーティング コンポーネントです:

6177ae8eed0322e277a7e6c21878d6d7、4915f05e1fd45774514682b289f54a27、ab736354b76d127562077b87d19fcb68、918422798e26d25f6fed3e9f4a3226eb

ab736354b76d127562077b87d19fcb68 コンポーネントは「URL」情報をメモリに保存し、ブラウザのアドレスを変更しません。 bar は、React Native やテスト環境などの非ブラウザ環境でよく使用されます。

918422798e26d25f6fed3e9f4a3226eb コンポーネントはルートを変更しないことがその名前からわかります。これはサーバー側のレンダリング中に非常に役立ちます。

4915f05e1fd45774514682b289f54a27 コンポーネント 私たちが最もよく知っているルーティングコンポーネントについて詳しく説明する必要はありません。ここでは、react-router が推奨する 6177ae8eed0322e277a7e6c21878d6d7 を使用するときに遭遇した落とし穴について説明します。

6177ae8eed0322e277a7e6c21878d6d7

6177ae8eed0322e277a7e6c21878d6d7 と 4915f05e1fd45774514682b289f54a27 の違いは、前者は rul のパス名セグメントに基づいており、後者はハッシュ セグメントに基づいていることです。 。

前者: http://127.0.0.1:3000/article/num1

後者: http://127.0.0.1:3000/#/article/num1 (必ずしもそうとは限りませんが、# は必須です) )

この違いによって生じる直接的な問題は、第 2 レベルまたはマルチレベルのルーティング状態では、ページを更新すると、6177ae8eed0322e277a7e6c21878d6d7 が現在のルートをサーバーに送信しますが (これはパス名であるため)、9f9e82c9878c2ba0f7868851331834a6 は行われません (ハッシュ セグメントであるため)。

フロントエンドのルートがバックエンドに送信されることは絶対に望ましくありません。

react-router 4.0 のドキュメントには次の一節があります:

注: ハッシュを使用したナビゲーション履歴の記録は、location.key と location.state をサポートしていません。 以前のリリースでは、この動作に対して shim を提供していましたが、解決できない問題がまだいくつかありました。 この動作に依存するコードやプラグインは正しく機能しません。 このテクノロジーはレガシー ブラウザのみをサポートするように設計されているため、ブラウザで使用する場合は代わりに e39972b58835f779f5cb270543abb76e を使用できます。

これには、サーバーがフロントエンドと連携していくつかの簡単な変更を行う必要があります。

この変更のアイデアは、リクエストされた URL が機能せず、フロントエンド ルートである場合に、エントリ HTML ファイル (私の背景は Nodejs) をリロードすることです。

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  //判断是主动导向404页面，还是传来的前端路由。
　　 //如果是前端路由则如下处理

  fs.readFile(__dirname + '/public/dist/index.html', function(err, data){
    if(err){
      console.log(err);
      res.send('后台错误');
    } else {
      res.writeHead(200, {
        'Content-type': 'text/html',
        'Connection':'keep-alive'
      });
      res.end(data);
    }
  })
});

ここには数え切れないほどの落とし穴があります。インターネットでメソッドを検索した後、nginx に切り替え、try_files フィールドを使用してエントリ html にダイレクトしましたが、リダイレクト後、webpack によってパッケージ化された js ファイルが実行されませんでした。 。

firebug を確認すると、この更新の応答ヘッダーに「Connection」:「keep-alive」が設定されていることがわかりました。問題はここにあるはずで、nodejs に切り替えてキープアライブで 200 ステータスを使用すると解決されます。問題。

react-router 4.0 マルチレベルルーティングでページを更新しても 404 は発生しなくなりましたが、フロントエンドの状態は保存されます。

関連する推奨事項:

React-router HashRouter と BrowserRouter の使用方法に関する簡単な説明

react-router browserHistory 更新ページ 404 の問題の解決方法

コンポーネント間のジャンプを実現する 3 つの Vue-Router

以上がReact-router 4.0 でサーバーが BrowserRouter とどのように連携するかに関するチュートリアルの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。