1. ホーム
  2. reactjs

[解決済み] react-router v4で履歴を取得するには?

2022-08-10 18:34:12

質問

React-Router v3 から v4 への移行に少し問題があります。 v3ではどこでもできたのですが。

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

v4でこれを実現するにはどうしたらいいでしょうか。

私は、私が使用することができることを知っている、ホック withRouter やリアクトコンテキスト、イベントルータのプロップスをComponentの中にいるときに使うことができるのは知っていますが、私の場合はそうではありません。

の等価性を探しているのですが NavigatingOutsideOfComponentsの等価性を探しています。 を v4

どのように解決するのですか?

をエクスポートするモジュールを用意すればよいのです。 history オブジェクトをエクスポートするモジュールが必要です。そして、プロジェクト全体でそのオブジェクトをインポートすることになります。

// history.js
import { createBrowserHistory } from 'history'

export default createBrowserHistory({
  /* pass a configuration object here if needed */
})

次に、組み込みのルータの一つを使うのではなく、その代わりに <Router> コンポーネントを使用します。

// index.js
import { Router } from 'react-router-dom'
import history from './history'
import App from './App'

ReactDOM.render((
  <Router history={history}>
    <App />
  </Router>
), holder)

// some-other-file.js
import history from './history'
history.push('/go-here')