[解決済み] React Router v4で履歴にプッシュする方法は？

質問

React Routerの現在のバージョン（v3）では、サーバーの応答を受け取って、その応答に対して browserHistory.push を使用して、適切なレスポンスページに移動します。しかし、これはv4では利用できませんし、これを処理する適切な方法が何なのかわかりません。

この例では、Reduxを使って。 components/app-product-form.js コール this.props.addProduct(props) ユーザがフォームを送信したとき。サーバーが成功を返した場合、ユーザーはCartページに移動します。

// actions/index.js
export function addProduct(props) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
      .then(response => {
        dispatch({ type: types.AUTH_USER });
        localStorage.setItem('token', response.data.token);
        browserHistory.push('/cart'); // no longer in React Router V4
      });
}

React Router v4の機能からCartページへのリダイレクトを行うにはどうすればよいですか？

解決方法は？

を使用することができます。 history メソッドをコンポーネントの外部で使用することができます。以下の方法で試してみてください。

まず history オブジェクトを使用します。 履歴パッケージ :

// src/history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

そして、それを <Router> ( ご注意 を使用する必要があります。 import { Router } の代わりに import { BrowserRouter as Router } ):

// src/index.jsx

// ...
import { Router, Route, Link } from 'react-router-dom';
import history from './history';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
        </ul>
        <Route exact path="/" component={HomePage} />
        <Route path="/login" component={LoginPage} />
      </div>
    </Router>
  </Provider>,
  document.getElementById('root'),
);

任意の場所から現在地を変更する、など。

// src/actions/userActionCreators.js

// ...
import history from '../history';

export function login(credentials) {
  return function (dispatch) {
    return loginRemotely(credentials)
      .then((response) => {
        // ...
        history.push('/');
      });
  };
}

アップデイト : には、少し違った例も見ることができます。 React Router FAQ .