問題タブ [react-router]

I have just left the starting blocks with ReactJs and discovered the react-router. Awesome stuff but i cannot see to get the following code to work with the "Router.HistoryLocation" as the 2nd param to the run function.

It all works perfectly without however uses a # in the url. This Q got me to Router.HistoryLocation as the 2nd param, so do the github docs. But when ever i run this in the browser the result is the target filled with nothing more that this:

Here is the code running on jsbin: http://jsbin.com/saxutulaxi/1/. If you edit the code and remove the "Router.HistoryLocation" from the last bit it all works but with it does not.

Here is the simple script i am running. // This is straight from the overview.md in the react-router docs var Router = ReactRouter; var DefaultRoute = Router.DefaultRoute; var Link = Router.Link; var Route = Router.Route; var RouteHandler = Router.RouteHandler;

Not sure what else to do except ask on here as i think i have followed the guides to the letter...

Thanks, John

私は、quickcypher.com で MVP の開発に少し時間を費やしてきました。いくつかの分析を開始したかったのですが、総訪問数を追跡するだけではうまくいきましたが、React Router を使用しているサイトでさまざまな URL を追跡しようとするとうまくいきませんでした。

私のアプローチは次のとおりです。カスタム「ページビュー」イベントのトリガーを使用して、一部のページで起動する GA タグを設定します。物事が発火したとき、たとえばフィールドページを「/rap」に設定します。各ビューの最上位コンポーネントの「componentDidMount」メソッドでイベントを発生させていました。デバッガーを使用して、期待どおりにイベントが発生するのを見ましたが、私の人生では、GA にイベントを確認させることはできません。タグを「すべてのページ」で起動するように単純化すると、GA は期待どおりに機能するので、React と関係があると思います。

誰かがこれをうまく実装したり、同様の問題に遭遇したりしましたか? 私のアプローチはすべて間違っていますか？いくつかのガイダンスを期待しています...乾杯！

サーバー側で ReactJS を正常に動作させることができましたが、クライアント側で応答するように頭を悩ませています。

すべてをオンにする必要があるように。私はajaxなどを介してデータを取得していません。データはコンポーネント自体のJSONにあります。

テキストによるアドバイスはたくさんありますが、それを機能させるための正確なコードはありません。また、反応ルーターを使用しています。

追加の背景として、commonJS と grunt を使用してコンパイルしています。コンパイルした JS を html ファイルに含めます。ボタンなどをクリックしても何も起こりません。

サーバ：

ルーター:

同形の React アプリケーションを構築しています。Webpack を使用して JS をバンドルしています。ルーティングにreact-routerを使用しています。「/search」ルートにヒットすると、レンダリングされるコンポーネントが API を呼び出します (現在は単なるテスト JSON ファイル)。クライアント側では、スーパーエージェントの呼び出しは正常に機能し、このルートをレンダリングするときにデータを取り込みます。サーバー側から同じルートをレンダリングしようとすると、次のエラーが発生します。

なぜこれが起こっているのですか？

呼び出しを行うコードは次のとおりです。

私は次のものを持っています：

DefaultRoute を使用すると、*Dashboard はダッシュボード内でレンダリングする必要があるため、SearchDashboard は正しくレンダリングされません。

「アプリ」ルート内の DefaultRoute がルート「searchDashboard」を指すようにしたいと思います。これは React Router でできることですか、それとも通常の Javascript (ページ リダイレクト用) を使用する必要がありますか?

基本的に、ユーザーがホームページにアクセスすると、代わりに検索ダッシュボードに送信したいと考えています。だから私はReact Router機能と同等のものを探していると思いますwindow.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

ストアからデータを要求し、そのデータをマップしてコンポーネントのリストをレンダリングするルート ハンドラーがあります。私の問題は、別のページに移動してから戻ると、コンポーネントを再レンダリングする必要があるため、スクロール位置が復元されないことです。リストがレンダリングされるまでスクロール位置の設定を遅らせたり、何らかのナビゲーションでレンダリングされたコンポーネントの状態を保存および復元したりする方法はありますか?

私はこれらすべてに非常に慣れていないため（約3日で）、私の無知を許してください.

React、React-Router、React-Bootstrap を組み合わせて使用​​しています。この男のように、React-Router<Link />と React-Bootstrap の<NavItem />機能を組み合わせて、.activeクラスが<li>要素ではなく (または要素と同様に) 要素に適用されるようにしたいと考えてい<a>ます。

本当にイライラするのは、これが機能していたのに、関係のない変更を加えたときに停止したことです (それ以来、元に戻したと思います)。

これが私のコードです：

listlink.js

app.js

let isActive =...にブレークポイントを設定するとlistlink.js、それぞれ 1 回、5 回目の 5 回ブレークします。が であるのは今回で 5 回目であり、参照するとエラーがスローされます。<ListLink>this.props.totoonthis.context.routerundefined.isActive

宣言のせいかなと思ったの<DefaultRoute />ですが、そうではないようです（行をコメントアウトしても違いはありません）。/#/[page]URL にどちらが含まれているかに関係なく、常にtoon5 回目の反復であり、常に同じエラーで失敗します。

Uncaught TypeError: Cannot read property 'isActive' of undefined

これ以上デバッグする方法がわかりません。アイデア？

React、React-Router (私は v0.12 を使用しています)、および Reflux を使用して、willTransitionTo で非同期リダイレクトを機能させるのに問題があります (このコードはログイン コンポーネントにありますが、既にログインしている場合は、あなたを「家」に送る必要があります）。コードは次のとおりです。

そのログイン コンポーネントはレンダリングされませんが、「ホーム」コンポーネントもレンダリングされません (URL も変更されません)。

React Router リンクをテストするための良い解決策を見つけるという悪夢に悩まされています。「カテゴリを適切にレンダリング」を渡していますが、テストに渡されるリンクはありません。さまざまなことを試しましたが、まだどこにも行きません。

以下は私がテストしようとしているものです：

成分

StubRouterContext

コンポーネントテスト

状況: いくつかの入力コンポーネントがありますが、ルート (react-router) によって異なるコンポーネントが表示されます。

問題: ルートを前後に切り替えたり、入力コンポーネントをドロップ/再追加したりするときに、ユーザーがすでに入力した入力値を保持したい。

これまでに2つの解決策を思いつきました：1）常にすべてをレンダリングしますが、表示されない場合はCSSで非表示にします（どういうわけかReactのアイデアを壊します）2）フラックスアーキテクチャにある種の「入力値ストア」を実装します（かなり精緻化する）

他のアイデアはありますか？もっと基本的なものが欠けていますか？