問題タブ [react-router]

私はreact-routerプラグインを使用してルートを設定しています.2つのルートを提供したいです. list/(list/:idかなり一般的です)

しかし、「詳細」ルートを機能させるのに苦労しています。私が試したのは：

まず、これは現在機能していDetailsComponentません。list/123 にアクセスするときにレンダリングされません (例)

2番目に、これがうまくいくとしても、コレクション内の1つのモデルを「ダウン」に渡すにはどうすればよいDetailsComponentですか?

私は browserify を使用して ReactJS と (とりわけ) react-routerをバンドルしています。しかし、コンソールを見ると、メッセージ...

... 2 回(!) 表示され、実際には 2 つの ReactJS インスタンスが実行されていることがわかります。

ブラウザー化された JS を見ると、ReactJS のソースは 1 回しか表示されませんでした。

どうすればこれを回避できますか?

package.json:

実行すると、次のようnpm ls | grep -i reactになります。

javascript API を介して react-router を使用する例を見つけようとしていますが、これまでのところ何も見つかりませんでした。

私の目標は、react-router を試薬と clojurescript で使用することです。したがって、誰かがこれを機能させた場合 (Om を使用しても)、正しい方向に進んでいただければ幸いです。それ以外の場合は、JSX を使用しない単純な JavaScript の例が役立ちます。

編集 1 -- 解決策に近づく

JSX をプレーンな JS に変換する手助けをしてくれた @FakeRainBrigand に感謝します。

これが React.js 0.11.2 バージョンです (現在のリリースの Reagent が使用しているのは 0.4.3 です)。

JSXTransformer.jsヒント:お使いのバージョンの Reactを使用して JSX->JS 変換を実行できます。ページに含めて、ブラウザの開発者コンソールを使用して実行するだけですJSXTransformer.transform('/** @jsx React.DOM */<Route location="history">...</Route>').code

Clojurescript のバージョンは次のとおりです。

残念ながら、Reagent がデフォルトで作成するコンポーネントは、「標準」の React コンポーネントではないようですReact.isValidClass(myReagentComponent) === false。あとは、そのテストに合格する形でコンポーネントを生成する方法を理解するだけです。そのために投稿されたスタックオーバーフローの質問があります。

Clojurescript Reagent プロジェクトで react-router を使用しようとしています。問題は、react-router がコンポーネントに pass を要求することですReact.isValidClass(component)。これは、React 0.11.2 では次のように定義されています。

Reagent は、関数ではなくオブジェクトとしてコンポーネントを生成するようです。これが私のコードです：

この種の相互運用を機能させる方法を考え出した人はいますか?

定義したルートをインポートし、別の React コンポーネントからそのルーター内の名前付きパターンにリダイレクトするための正式な方法はありますか?

私のルートが次のようになっているとします。

そして、私は次のようなコンポーネントを持っています:

2 つの質問:

1. window.location.replace()プログラムによるリダイレクトを処理するには、または他の React-Router メソッドを使用する必要がありますか?
2. ルーターをインポートして名前付きルートにリダイレクトする方法はありますか?

私は次のようなものを書きたい：

現在、Jest テストを React アプリケーションに追加しようとしています (ここにあります)。

ただし、次のテストを実行すると、

次のエラーが表示されます。

私のアプリとCategoryPageコンポーネントの両方が、react-router を明確に使用しています。CategoryPage には、認証に react-router を使用する mixin が含まれています。私自身のデバッグに基づいて、JestmakeHrefがナビゲーション用の react-router の組み込みメソッドの 1 つである を呼び出そうとすると、エラーが発生することがわかりました。

これを修正するために、最初に を呼び出してみjest.dontMock('react-router')ましたが、効果はありませんでした。問題は、 をモックしないことによってCategoryPage、 jest がそのすべての依存関係をモックなしで自動的かつ不可逆的にインクルードすることです。

この問題の解決が非常に難しい理由の 1 つは、React で Jest を使用しているほとんどの人がコンポーネントをテストしていないように見えるためです。これは、テストに重点を置いていないか、Flux を使用してストア、ディスパッチャーなどのテストのみを行っているためです。まだ Flux を使用していないため、これはオプションではありませんが、将来的に移行する必要があるかもしれません。

編集 1: を削除するとjest.dontMock('../js/components/CategoryPage.jsx')テストに合格しますが、そのコンポーネントの機能を実際にテストすることはできません。

編集2:除外するjest.dontMock('jquery')と、モーダルの作成に使用するミックスインに関連する別のエラーが発生します:

EDIT 3:バグをreact-routerのNavigation mixinに分離したように見えますthis.context.makeHref。React チームはthis.contextバージョン .9 以降非推奨になっているため、これが問題の原因である可能性があると思います。したがって、回避策または修正this.contextは大歓迎です。

Javascript でこれはどういう意味ですか? これはreact-routerの例で見つけました

browserify で実行すると、次のエラーが表示されます。

https://github.com/rackt/react-router/blob/master/examples/dynamic-segments/app.js

Esprima も同じエラーを返します: http://esprima.org/demo/validate.html