問題タブ [react-router-redux]

私の React/Redux アプリケーションには、いくつかの非同期アクションがあります。ユーザーがgetDataサーバーへのリクエストを開始するとします。すぐに aGET_DATA_REQUESTがディスパッチされ、getDataAJAX 呼び出しがサーバーに向かっています。

成功または失敗すると、それに応じてGET_DATA_SUCCESSまたはGET_DATA_FAILUREアクションがディスパッチされ、データが UI にレンダリングされます。

react-router-reduxここで、AJAX コールバックへの反応として、アプリケーションに ( を使用して) 履歴状態をプッシュさせたいと考えています。つまり、成功すると、ユーザーは別の URL (ルート) に「リダイレクト」され、新しく受信したデータに依存する別のモジュールが表示されます。

この機能をレデューサーに含めるのは非常に悪い考えだと思います。これはもはや純粋ではなくなるためです (URL の変更は副作用です)。

何かご意見は？

ありがとう

私index.jsのように見えます：

そして私のようにRoot.js見える：

そして私のconfigureStore.jsは次のようなものです：

routes.js:

そして私のLoginViewコンポーネントは次のようなものです:

に関して非常に混乱していhistoryます。私のコンポーネントではhistory、小道具を取得しています。コンポーネントでthis.props.history行ったように。console.log(this.props.history)

しかし、私の中でactionsはどうにもなりませんhistory..

私の行動は次のようなものです：

ここでは取得できますが、取得できgetState()ませんhistory。

したい場合はredirect？history次のようにリダイレクトできるようにしたい：

history.pushState(null, '/dashboard')

誰でも私を助けることができます..？これには本当に困惑..

別のページに移動するときに問題が発生しました。その位置は前のページのままです。そのため、自動的に一番上にスクロールしません。window.scrollTo(0, 0)また、onChangeルーターで使用しようとしました。私もscrollBehaviorこの問題を修正するために使用しましたが、うまくいきませんでした。これについて何か提案はありますか？

私が欲しいのは、このように見える HTML をレンダリングすることです<a href="/page/my-cool-slug">My cool Slug</a>。

つまり、誰かがリンクを右クリックして新しいタブで開くことができるということです。これにより、react-router が提供する豪華な pushState がバイパスされます。

ただし、誰かが通常のクリックを行った場合は、redux を更新して、新しいスラッグ (またはページネーション ページなど) が何であるかを伝え、 を呼び出す必要がありますbrowserHistory.push(...)。

便利で簡単な方法が必要です。すべての混乱なしにこれらのほとんどすべてを行う何か。私のアプリケーションは次のようになります。

また、event.targetイベントハンドラーでa.href属性を取得しようとしましたが、<a>タグに<span>要素が含まれているため、要素内でクリックしevent.targetたタグです。<span><a>

あなたがreactjsで転送を要求しているように見えるときは、リンクまたはボタンを配置し、消費者がそれをクリックすると、ページがルーターの対応するパスをリロードします。ここで、投稿をリクエストし、応答のステータスが 200 のときにルーターの他のパスにページをめくります。リンクまたはボタンを使用できません。reactjs はコードを使用してこれを行うことができますか? like : 特定のComponent.setPath(otherPath); 特定のComponent.turn; 私の英語力は貧弱で、私がやりたい機能を提供することが明確でないかもしれません。ありがとう！</p>

react、redux、react-router、react-redux-router バインディングを使用して単一ページ アプリを作成するのに行き詰まっています。

サーバーは明らかにルートを認識していないため、ルートhttp://localhost:3001/registerは単にルーターによって一致せず、ブラウザーに返されます。Cannot GET /register私は react-redux スタックに比較的慣れていないため、かなり基本的なものが欠けている可能性があります。

編集: IndexRoute は機能しており、App-Component 内に Home-Component を表示しています。

Edit2: サーバー側のレンダリングを使用しておらず、webpack-dev-server を使用して開発しています。

しかし、これまでのところ関連するコードスニペットは次のとおりです。

entry.js

reducers.js

ルート.js

Navigation.jsx (App.jsx 内でレンダリング)

たぶん、私がここで見逃していることは誰かにとって明らかです。さらにコードが必要な場合は、お知らせください。