BrowserRouter が React-router サーバーと連携する方法

この記事では主に、react-router 4.0 でのサーバーと BrowserRouter の連携に関する詳細な説明を紹介し、参考として提供します。

react-router は、React フレームワークのルーティング ソリューションとして React プロジェクトで重要な役割を果たします。

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

、、、

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

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

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

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

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

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

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

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

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

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

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

この変更のアイデアは、リクエストされた 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 Nativeのクロスドメインリソースエラーの問題

nodejsにnpmの最新バージョンをインストールする(詳細なチュートリアル)

jsで関数debounceを実装する方法(詳細なチュートリアル)

vue-scroller でスクロール位置をマークして記録する方法

WeChat アプレットがレビューに合格しなかった場合はどうすればよいですか?

スワイパーを使用してスライドコンテンツを変更する方法（詳細なチュートリアル）

Vue.js 2.0を使用して背景ビデオログインページを実装する方法

以上がBrowserRouter が React-router サーバーと連携する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。