如何在 React Router v4 中推送到历史记录？

小编典典

如何在 React Router v4 中推送到历史记录？

all

在当前版本的 React Router (v3) 中，我可以接受服务器响应并使用browserHistory.push它转到相应的响应页面。但是，这在
v4 中不可用，我不确定处理此问题的适当方法是什么。

在这个例子中，使用 Redux， components/app-product-
form.jsthis.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 的功能重定向到购物车页面？

阅读 123

2022-03-14

共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 Router FAQ中看到一个稍微不同的例子。

2022-03-14