問題タブ [react-router]

定義したルートをインポートし、別の 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

react-routerなどの React ライブラリを使用すると、次のエラーが発生することがあります。

キャッチされていない TypeError: 未定義のプロパティ 'firstChild' を読み取れませ
ん /~/react-router/~/react/lib/ReactMount.js?:606

どうすれば修正できますか？

willTransitionTo認証に静的メソッドを 使用しています。これは、私が多少従っている例です。

私transition.retry()は元のクエリ文字列とともに元のルートに行きます。ただし、クエリ文字列の先頭に疑問符がないため、遷移で意図されたルートに移動する代わりに、次のようになります。/authToken=xyz123

そう、

• ユーザーはhttp://wickedsweet-react-site.com/?authToken=xyz123にアクセスします
• http://wickedsweet-react-site.com/waitforserverauthへの反応ルート (経由transition.redirect)
• サーバーは認証中であり、戻ります
• http://wickedsweet-react-site.com/authToken=xyz123 oopsへのルートを反応させます (経由transition.retry())

のストリッピングを回避するにはどうすればよい?ですか? ちなみに、すでに認証済みなので、この時点では authToken クエリ文字列は必要ありませんが、今のところ、それは二次的な問題です。

これが私のwillTransitionTo方法です。

認証のために、「authToken」というクエリ文字列パラメーターにトークンを渡しています。ユーザーがauthTokenを渡すとwillTransitionTo、サーバーに認証を依頼し、サーバーの認証をリッスンするWaitingForAuthページにユーザーをリダイレクトするために使用しています。これが WaitingForAuth React ページです。

サーバーが認証を返し、トークンが有効な場合、 WaitingForAuth が実装さcomponentWillUpdateれ、リダイレクトで中止された元の遷移が再試行されます。

コンポーネントのリンクをクリックしたときに、現在デフォルトで変更されているのと同じ方法で URL を変更したいのですが、ブラウザの履歴にプッシュされることはありません。この回答で、次のことが誰かのために機能していることがわかりました。

this.props.activeRouteHandler({key: "anystring"})

しかし、どこに配置すればよいのか、それが機能するかどうかさえわかりません。誰かが私に例を挙げてもらえますか? ありがとう

React-Router 内にいくつかのネストされたルートを設定しています (v0.11.6 は私が取り組んでいるものです) が、ネストされたルートの 1 つにアクセスしようとすると、親ルートがトリガーされます。

私のルートは次のようになります。

ルートを折りたたむと、次のようになります。

それは正常に動作します。私が入れ子にした理由は、「ダッシュボード」の下に複数の子があり、それらすべてdashboardに URL のプレフィックスを付けたいからです。

React Routerを使用して、ルート構成で可能なすべてのパスのリストを取得する方法があるのだろうか?

たとえば、次のようになります。

私は…したい：

["/", "/about", "/blog"]

React Routerを使用した React.js アプリケーションの構造は次のとおりです。

コンポーネントにいくつかのプロパティを渡したいですComments。

（通常、私はこれを次のようにします<Comments myprop="value" />）

React Router でこれを行う最も簡単で正しい方法は何ですか?

state動的セグメントのパスで react-router によってロードされるコンポーネントの取得に問題があります/item/:id:

これらのメソッドのいずれも呼び出さcomponentDidMountれcomponentWillReceivePropsません。

そして、レンダリングは初期化されたばかりの空dataのオブジェクトをログに記録します..

ルーターは次のようになります。