問題タブ [react-router]

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 を使用していますが、ネストされたコンポーネント以外に、ルーティング、ビルド、および同期が正常に機能しているようです。

私のアプリでは、ナビゲーション用の react-router と組み合わせて、React.js を JavaScript フレームワークとして使用しています。

メイン コンテナ div のコンテンツを置き換える際に問題があります。新しいルートにアクセスすると、render メソッドを呼び出して適切なルート ハンドラーがアクティブになりますが、その html はメイン コンテナー div の既存のコンテンツに追加されるため、置き換える必要があります。

Page2Handler は、最初のページの読み込み時に App ハンドラーがレンダリングする既存の html にその html を追加するだけです。

ここで何が間違っていますか？

ルーター.jsx:

client.jsx:

インデックス.html:

Page2Handler:

App.jsx:

React Router を試しています。私の質問を説明するための単純化された例(投稿の下部):

ビュー1

View2 の類似クラス

アプリ

ルーター

ヘッダー/ツールバーは常に表示されるため、AppHeader を (個々のビューではなく) App クラスに配置したいと考えています。ビュークラスの一部である場合、ルーターが別のビューを開くたびにヘッダーが再マウントされます。ただし、そのコンポーネントの小道具は、アクティブなルートに基づいて異なる場合があります。別のタイトルのように、ビューで何か (状態の変化) を引き起こすクリック可能なアクションを持つアイコン。

これを解決する良い方法を見つけようとしました。つまり、どのビュー クラスがアクティブなルート ハンドラーであるかに基づいて、AppHeader のさまざまな小道具を意味します。ビュークラスは変化するコンポーネントなので、小道具がそのコンポーネントで使用されなくても、ビューコンポーネント（上記の例ではView1 / View2）に含めることを考えました。私はそれをこれらのコンポーネントの静的として見てから、それらをRouter.runで抽出しました。その問題は、ヘッダーのクリック可能なリンクのように、同じコンポーネントでイベントハンドラーを呼び出すことができないことです(View1の例のように)ビューで何かをする。

逆流ストアを作成しようとしましたが、ビュー コンポーネントの componentWillUpdate で、アプリ コンポーネントでリッスンされ、小道具としてヘッダーに送信されるストアで何らかのアクションを呼び出します。ただし、最初のレンダリングでは、アプリ コンポーネントのレンダリング プロセス中にそのアクションが呼び出されるため、最初のヘッダー プロパティはまだ使用できないため表示されません。

私が考えたもう 1 つのアプローチは、ビューごと (ルーター ハンドラーごと) に 1 つの Reflux ストアを持ち、個々のストアにヘッダーの小道具を持ち、それらを App コンポーネントのヘッダーに渡すことでした。しかし、どのルートがアクティブであるかに基づいて、使用する店舗を切り替える必要があります。React Router でストアを選択する以外に、ハンドラーごとに個別のストアを作成する方法が見つかりませんでした。

このような場合、他にどのような選択肢がありますか?

React と React Router を使用して簡単なアンケートのようなものを作成したいシナリオに対する迅速かつ簡単な回答で、ユーザーが URL を変更してどこでも閲覧できるようにしたくない場合や、そうしたくない場合履歴の状態をブラウザにプッシュして、本質的に戻るボタンの使用を防止しますか?

サンプル ルートは次のようになります。

ただし、URL は常に同じである必要があり、履歴は変更されません。基本的に、ルーティングのない単一ページ アプリの動作と同じです。