問題タブ [react-router]

を使用しreact-router v0.12.4ます。

ルート名は一意である必要がありますか? 以下はうまくいかないようです。

アプリにパブリック エリアとプライベート エリアがあり、パブリック ビューのどこにでもログイン モーダル ダイアログを表示できるようにしたいと考えています。モーダルには独自のルートが必要です。2 番目のユース ケースは、プライベート エリアのプロファイル モーダルです。

問題は、モーダルが現在のビュールートの子ではないため、モーダルが表示されるとバックグラウンドの現在のビューが消えることです。

すべての可能なビュー ルートに同じモーダルを追加したくないので、ここで質問があります: 親ルートからモーダル ルートを分離し、メイン コンテンツのレンダリングなしでアプリのどこにでも表示することは可能ですか? これに最適なアプローチは何ですか？この問題を見つけましたが、同じ問題ではないようです。

モーダル ルートでブラウザを更新すると、バックグラウンドで何もレンダリングされませんが、それは私が対処できる問題です。

既存のアプリを取得し、最も単純な HashLocation メソッドで React Router を使用して開始しようとしています。

使用: React 0.12.2 React Router 0.12.4

main.js (エントリ ポイント):

ルート.jsx:

app.jsx:

question1.jsx (他の質問も同様です):

app.jsx でレンダリングされたリンクをクリックすると、Firefox のコンソールに次のエラーが表示されます。

ビルドされた main.js ファイルの次の行に移動します。

ただし、Chrome では、まったく別のエラーが発生します。

面白いことに、ページ全体を手動で更新すると、正しい質問が画面に表示されます。たとえば、新しいタブを開いてhttp://localhost:9090/#/questions/1に移動すると、「質問 1」が表示されます。画面上：

しかし、質問 2 をクリックすると、次のエラーが発生します。

しかし、questions/2 の URL でページを完全にリロードすると、次のように機能します。

Flux で認証モジュールを作成しています。アクション: auth、auth_success、auth_error。アクション auth_error が発生すると、ルーターは「/login」に移動することを考えています。アクション、アクション、auth_success が発生すると、ルーターは「/dashboard」に移動します。しかし、アクションはディスパッチャにしか行かないため、間違っているようです。コールバックをルーティングする方法がわかりません。たぶん店の価値をチェックしてください？

ルートを別のルートにリダイレクトしようとしていて、次のようにいくつかのパラメーターを渡します。

私のサインインルート:

params として何を入力しても、this.getParams() は空のオブジェクトを返します。助言がありますか？

この角度のある質問に非常に似ています:反応ルーターを使用する場合、ページ内ナビゲーションにアンカーリンクを使用するにはどうすればよいですか?

つまり、react-router を使用する場合、次のプレーンな HTML をどのように実装すればよいでしょうか?

現在、そのようなリンクのクリックを傍受し、アンカー位置までスクロールしています。これは、ページの一部のセクションに直接リンクすることが不可能であることを意味するため、満足のいくものではありません。

react-router を webpack-dev-server で動作させようとしていますが、/SOMEURL を取得できません。これは、webpack-dev-server がその特定のファイルを探していますが、見つからないためです。ファイル自体を検索するのではなく、react-routerを使用することにwebpackを頼りたいです。

どうすれば設定できますか？

私のうなり声：

過去数週間、React Router を使用して大きな成功を収めてきましたが、解決策が見つからないように見える問題に遭遇しました。任意のクエリ パラメータが URL に追加されると (この例では、電子メールからの URL 追跡目的で)、表示されたページが読み込まれ、警告なしで自動的に更新されます。

最も基本的なルート設定を考えると:

そして、デフォルトのハンドラー:

http://whatever.com/resultsすべてに移動すると正常に動作しhttp://whatever.com/results?ref=trackますが、ページに移動すると更新され、にリダイレクトされhttp://whatever.com/results#/ます。ハッシュとスラッシュの後にqueryParams を追加すると、正しい動作になることに注意してください。問題は、これらのリンクの多くがサーバー側で生成され、そのような方法でハッシュを強制することは望ましくないことです。

queryParams のワイルドカード ハンドラーを設定する必要がありますか? ドキュメントへのポインタも役立ちます。

編集:
これは包括的な質問/意図しない更新につながるバグに対処していませんが、Router.HistoryLocation PushState オプションを使用してルートをロードすると、queryParams の事前レンダリングが可能になることがわかりました:

ありがとう！

Flux と react-router を使用してアプリの開発を開始しました。私のコンポーネントの 1 つは、Flux ストアから取得した状態を使用して入力します。これはうまくいきます。ただし、react-router を使用してこのコンポーネントから離れてから再び戻ると、上記のエラーが発生します。ページを更新すると、エラーはなくなり、ページは正常に動作します。

これについての私の理解から、react-router はこのコンポーネントを再マウントしていないようで、マウントされていないコンポーネントの状態を変更しようとしているため、エラーが発生します。

これが正しい場合、react-router にコンポーネントを再マウントさせるにはどうすればよいですか?

PS。このコードは長すぎてここに投稿できません Github に投稿されましたが、問題が解決したため、投稿は削除されました。更新（ショーンに感謝）：

アプリは dist フォルダーを使用して実行できます。このフォルダーを Web サーバーにコピーし、ブラウザーでそのフォルダーを参照するだけです (ローカルで xampp を使用しています)。問題は週ページにあります (コンポーネント TableWeekly がこのテーブルを実行します)。この問題は、ドロップダウンを使用して講師のビューを変更すると発生します。最初のロード時または更新後には正常に動作しますが、別のページに移動して再度戻ると失敗します。

Navbar という単純なネストされた React コンポーネントをレンダリングしようとしていますが、その中で別のコンポーネント (またはこの場合は Link タグ) を使用すると、コンソールに「Uncaught Error: Cannot find module "../Navbar"」というメッセージが表示されます。Link タグを削除すると、h1 タグが表示され、エラーは発生しません。App コンポーネントで Link タグを使用できるので、プロジェクトで機能するはずです。

私の App.js コードは次のようになります。

私の Navbar.js コードは次のようになります。

React-Router、Webpack、および Browser-Sync を使用していますが、ネストされたコンポーネント以外に、ルーティング、ビルド、および同期が正常に機能しているようです。