☰

React Router v4 で履歴にプッシュするにはどうすればいいですか? 質問する

tag-icon • tag-icon reactjs react-router react-router-v4
React Router v4 で履歴にプッシュするにはどうすればいいですか? 質問する

React Router の現在のバージョン (v3) では、サーバー応答を受け入れて、browserHistory.push適切な応答ページに移動するために使用できます。ただし、これは v4 では使用できず、これを処理するための適切な方法がわかりません。

この例では、Redux を使用して、ユーザーがフォームを送信するとcomponents/app-product-form.jsが呼び出されますthis.props.addProduct(props)。サーバーが成功を返すと、ユーザーはカート ページに移動します。

// 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 の機能からカート ページにリダイレクトするにはどうすればよいですか?

ベストアンサー1

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('/');
      });
  };
}

UPD : 少し違う例も見ることができますReact ルーターに関するよくある質問。

おすすめ記事