web-dev-qa-db-ja.com

履歴を使用し、react-router-v4でアクションクリエーターをプッシュしますか？

react-router-redux完了からルーティングするためにaction creator async actionを使用せずにこれを解決することがわかった唯一の作業方法は、コンポーネントからアクション作成者にhistory propを渡し、実行することです。

history.Push('routename');

BrowserRouterは渡された履歴プロパティを無視するため、browserhistoryでカスタム履歴オブジェクトを使用することはできません。

これを解決する最善の方法は何ですか？

reactjsreduxreact-routerreact-reduxreact-router-v4
16
Jitin Maherchandani

BrowserRouterを使用する代わりに、次のようなカスタム履歴でRouterを使用できます。

_import { Router } from 'react-router'

import createBrowserHistory from 'history/createBrowserHistory'

export const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>
_

その場合、history.Push()は機能します。 BrowserRouterでは、_history.Push_は機能しません。これは、_<BrowserRouter>_が独自の履歴インスタンスを作成し、その変更をリッスンするため、新しいbrowserHistoryを作成できないためです。したがって、別のインスタンスはURLを変更しますが、_<BrowserRouter>_は更新しません。

カスタムhistoryを作成したら、それをエクスポートしてから_action creator_にインポートし、それを使用して次のように動的にナビゲートできます。

_import { history } from '/path/to/index';

const someAction = () => {
    return dispatch => {
        ApiCall().then((res) => {
            dispatch({type: 'SOME_CALL', payload: res })
            history.Push('/home');
        })
    }
}
_
27
Shubham Khatri