web-dev-qa-db-ja.com

react-router v4の履歴を取得する方法

React-Router v3からv4への移行に関して、少し問題があります。 v3では、私はどこでもこれをすることができました：

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

どのように私はv4でこれを達成しますか。

あなたがコンポーネント内にいるとき、私は、ホックwithRouter、反応コンテキスト、またはイベントルータープロップを使用できることを私は知っています。しかし、そうではありません。

V4で NavigatingOutsideOfComponents と同等のものを探しています

reactjsreact-router
76
storm_buster

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')
131
Paul S

これはうまくいきます！ https://reacttraining.com/react-router/web/api/withRouter

import { withRouter } from 'react-router-dom';

class MyComponent extends React.Component {
  render () {
    this.props.history;
  }
}

withRouter(MyComponent);
58
Justin Yueh

あなたができることはreactとreact-routerそのものを使って、ファイル内でスコープできるhistoryオブジェクトを提供してからエクスポートすることです。

history.js

import React from 'react';
import { withRouter } from 'react-router';

// variable which will point to react-router history
let globalHistory = null;

// component which we will mount on top of the app
class Spy extends React.Component {
  componentWillMount() {
    const { history } = this.props;
    globalHistory = history; 
  }

  componentWillReceiveProps(nextProps) {
    globalHistory = nextProps.history;
  }

  render(){
    return null;
  }
}

export const GlobalHistory = withRouter(Spy);

// export react-router history
export default function getHistory() {    
  return globalHistory;
}

あとでComponentをインポートしてマウントし、履歴変数を初期化します。

import { BrowserRouter } from 'react-router-dom';
import { GlobalHistory } from './history';

function render() {
  ReactDOM.render(
    <BrowserRouter>
        <div>
            <GlobalHistory />
            //.....
        </div>
    </BrowserRouter>
    document.getElementById('app'),
  );
}

そして、マウントされたときにアプリにインポートするだけです。

import getHistory from './history'; 

export const goToPage = () => (dispatch) => {
  dispatch({ type: GO_TO_SUCCESS_PAGE });
  getHistory().Push('/success'); // at this point component probably has been mounted and we can safely get `history`
};

私も npmパッケージ を作ってそれさえしています。

7
Tomasz Mularczyk

もしあなたがreduxとredux-thunkを使っているなら、 react-router-redux を使うのが最善の解決策です。

// then, in redux actions for example
import { Push } from 'react-router-redux'

dispatch(Push('/some/path'))

いくつかの設定をするためにドキュメントを見ることは重要です。

4
Arnold Gandarillas