問題タブ [react-router]

私のアプリでは、ナビゲーション用の 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 は常に同じである必要があり、履歴は変更されません。基本的に、ルーティングのない単一ページ アプリの動作と同じです。

私はすでに ReactJS と CommonJS に精通しています。意味はわかりますが、 ReactRouterライブラリのこの index.jsファイルをexports見ると、このコンテキストでの意味がよくわかりません。exports

browserifyこのプロジェクトをindex.jsファイルから開始する場合、結果はグローバルexportsスコープで定義されますか?

私は次のようなものを期待していました：

しかし、代わりに、index.jsこれがあります:

exports.DefaultRoute他の場所ではなく、index.jsファイル内で見つかった場合は、それを理解できます。しかし、どこでも index.js を必要としないので、どうすれば参照できますDefaultRouteか?

これはグローバルスコープに含まれますか？

react-intl (1.2.0) で react-router (0.13) を使用しています。私はこれをルートに持っています：

そしてこれはアプリで：

命令呼び出し (this.formatRelative) と formatRelative のコンポーネント使用の両方が失敗し、「メッセージは文字列または AST として提供する必要があります。」

私が間違っていることは何ですか？

ReactJS と React-Router は初めてです。props を介してreact-router<Link/>からオブジェクトを受け取るコンポーネントがあります。ユーザーがこのコンポーネント内の「次へ」ボタンをクリックするたびに、オブジェクトを手動で呼び出したいと思います。<Link/>

現在、参照を使用してバッキング インスタンスにアクセスし、生成される「a」タグを手動でクリックしてい<Link/>ます。

質問:リンクを手動で呼び出す方法はありますか (例: this.props.next.go)?

これは私が持っている現在のコードです:

これは私がしたいコードです:

反応ルーターを使用してページのルートを作成しようとしていますが、常に次のエラーが発生します

これは私のコードがどのように見えるかです

これは私にとってうまくいったことです。誰かが同じ問題に直面した場合に備えて投稿しています

また、バックエンドにも URL ルートを設定します。

postルートとコンポーネント内の親 ReactJS コンポーネントからメソッドにアクセスする方法がわかりません。を使用してreact-routerいます。

これは <RouteHandler {...this.state} />

のメソッド/関数pushToPostList()は、ポスト オブジェクトを に保持されている配列に追加しますthis.state.myList。

<Post />コンポーネントを機能させようとしているので、 this.props.pushToPostList(newPost)this.state.myList を更新するために呼び出されます<App />

ルーターは次のとおりです。

より多くのコード:

アプリに react-router を実装しようとしています。私のメインファイルには次のコードが含まれています：

私のAppコンポーネント内には、次のコードがあります。

このコードは、次のエラーを生成します。

私<RouteHandler />が直接になるように変更すると<ContentPage />、コードは機能します。私は何が間違っているのですか？

編集:どうやら、サーバー上でも「アプリ」コンポーネントをレンダリングする「 Reactスターターキット」を使用していたようです。そのコンポーネントに react-router を追加すると、この (サーバー側の) エラーが発生しました。

私のプロジェクトではサーバー側のレンダリングは必要なかったので、これを削除することで問題が解決しました。時間があるときに、なぜこのようなことが起こったのかを後で調べてみます。

react-routerのreadme に従います。

ノードと評判の良いフロント エンドの js フレームワークに非常に新鮮であるため、初心者の質問を許してください..

サーバーでルートを処理するにはどうすればよいですか?

つまり、誰かが に着陸したときに何が起こるか/calendar、反応コードのクライアントと高速ルートのサーバーでルートに対応する必要がありますか、それとも高速でワイルドカードルートが必要ですか. IE 誰かが着陸した/calendar場合、HTML を配信し、/react が残りを処理できるようにする必要がありますか?

ありがとう、ジョン