如何在 React Router v4 中推送到历史记录? [英] How to push to History in React Router v4?

问题描述

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

在这个例子中，使用 Redux，当用户提交表单时，components/app-product-form.js 调用 this.props.addProduct(props).当服务器返回成功时，用户被带到购物车页面.

//actions/index.js导出函数 addProduct(props) {返回调度 =>axios.post(`${ROOT_URL}/cart`, props, config).then(响应 => {dispatch({ type: types.AUTH_USER });localStorage.setItem('token', response.data.token);browserHistory.push('/cart');//不再在 React Router V4 中});}

如何从 React Router v4 的函数重定向到购物车页面?

解决方案

您可以在组件之外使用 history 方法.按以下方式试试.

首先，创建一个使用历史包的history对象:

//src/history.js从历史"导入 { createBrowserHistory };导出默认 createBrowserHistory();

然后将其包裹在 中(请注意，您应该使用 import { Router } 而不是 import {BrowserRouter 作为路由器 }):

//src/index.jsx//...从'react-router-dom'导入{路由器，路由，链接}；从 './history' 导入历史记录；ReactDOM.render(<提供者商店={商店}><路由器历史={历史}><div><ul><li><Link to="/">首页</Link></li><li><Link to="/login">登录</Link></li><路由精确路径="/" component={HomePage}/><Route path="/login" component={LoginPage}/>

</路由器></提供者>,document.getElementById('root'),);

从任何地方更改您当前的位置，例如:

//src/actions/userActionCreators.js//...从'../history'导入历史；导出函数登录(凭据){返回函数(调度){返回登录远程(凭据).then((响应) => {//...history.push('/');});};}

<小时>

UPD:您还可以在 React 路由器常见问题解答.

In the current version of React Router (v3) I can accept a server response and use browserHistory.push to go to the appropriate response page. However, this isn't available in v4, and I'm not sure what the appropriate way to handle this is.

In this example, using Redux, components/app-product-form.js calls this.props.addProduct(props) when a user submits the form. When the server returns a success, the user is taken to the Cart page.

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

How can I make a redirect to the Cart page from function for React Router v4?

解决方案

You can use the history methods outside of your components. Try by the following way.

First, create a history object used the history package:

// src/history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

Then wrap it in <Router> (please note, you should use import { Router } instead of 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'),
);

Change your current location from any place, for example:

// src/actions/userActionCreators.js

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

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

---

UPD: You can also see a slightly different example in React Router FAQ.

这篇关于如何在 React Router v4 中推送到历史记录?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！