2017-01-15 7 views
2

反応ルータのv4アプリケーションで履歴pushStateを処理するためにredux-middlewareを書きたいと思います。__react-router/v4__ BrowserRouterの履歴インスタンスにアクセスするには?

問題は、createHistoryでBrowserRouter内に作成されたので、私はBrowserRouterのhistoryの正しいインスタンスに簡単にアクセスできないということです。

私の質問:historyシングルトンをBrowserRouterコンポーネントに簡単に渡すことはできますか?

とにかく、この例はもう機能しません。これを行うには良い方法はありません現在アルファ版で

https://github.com/ReactTraining/react-router/blob/7f6706dab4827afc1c26a58418f8ef8c8ab40125/website/examples/Redux.js

答えて

0

。独自の<___Router>コンポーネントを作成するか、またはcontext.router変数を使用してhistoryメソッドにアクセスすること(およびミドルウェアで使用できるようにアクションに渡す)のいずれかの回避策があります。

次回のベータ版では、historyインスタンスを作成して<Router>に渡すオプションがあります。これにより、コンポーネントの外からのナビゲーションが可能になります。

// history.js 
import { createHistory } from 'history' 
export default createHistory() 

// index.js 
import history from './history' 
render((
    <Router history={history}> 
    <App /> 
    </Router> 
), holder) 

// middleware.js 
import history from './history' 
export default store => dispatch => action => { 
    if (action.type === 'ROUTING_ACTION') { 
    history.push('/new_location') 
    } 
} 
0

私は一時的にIが反応-ルータV4で起こると仮定この問題を解決するようなので、(Iも反応ルータ-DOM有する)。

コンポーネントから履歴オブジェクトを渡す(セレクタ)また、私はcreateHistoryが私のために働かなかったことを指摘しなければならない

export function register(user, history) { 
// this history is the argument from the register call in the component 
    return function (dispatch) { 
     dispatch(initRequest()); // show spinner or something 
     return Auth.register(user) 
      .then(()=> { 
       dispatch(registerSuccess()); 
       history.push('/new-route'); 

     }).catch((err)=> dispatch(setErrorMessage())) 
    } 
} 

引数として(「/新ルート」)history.pushを呼び出すアクションの作成者の定義でアクションの作成者に、その後は、私がしなければなりませんでした:

import createBrowserHistory from 'history/createBrowserHistory' 
const history = createBrowserHistory(); 
関連する問題