在当前版本的React Router (v3)中,我可以接受服务器响应并使用browserHistory。点击进入相应的响应页面。但是,这在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的函数重定向到购物车页面?


当前回答

React Router 4中最简单的方法是使用

this.props.history.push('/new/url');

但是要使用此方法,您现有的组件应该能够访问历史对象。我们可以通过

If your component is linked to Route directly, then your component already has access to history object. eg: <Route path="/profile" component={ViewProfile}/> Here ViewProfile has access to history. If not connected to Route directly. eg: <Route path="/users" render={() => <ViewUsers/>} Then we have to use withRouter, a heigher order fuction to warp the existing component. Inside ViewUsers component import { withRouter } from 'react-router-dom'; export default withRouter(ViewUsers); That's it now, your ViewUsers component has access to history object.

更新

2-在这个场景中,将所有的路由道具传递给你的组件,然后我们可以从组件中访问this.props.history,即使没有一个HOC

eg:

<Route path="/users" render={props => <ViewUsers {...props} />}

其他回答

你可以像我这样使用它来登录和曼尼不同的东西

class Login extends Component {
  constructor(props){
    super(props);
    this.login=this.login.bind(this)
  }


  login(){
this.props.history.push('/dashboard');
  }


render() {

    return (

   <div>
    <button onClick={this.login}>login</login>
    </div>

)

React路由器V4现在允许历史道具如下所示:

this.props.history.push("/dummy",value)

然后,只要位置道具可用,就可以访问该值 State:{value}不是组件状态。

所以我的做法是: -而不是使用历史重定向。推送,我只是使用从react-router-dom重定向组件 当使用这个组件时,你只需要传递push=true,它就会处理剩下的事情

import * as React from 'react';
import { Redirect } from 'react-router-dom';
class Example extends React.Component {
  componentDidMount() {
    this.setState({
      redirectTo: '/test/path'
    });
  }

  render() {
    const { redirectTo } = this.state;

    return <Redirect to={{pathname: redirectTo}} push={true}/>
  }
}
/*Step 1*/
myFunction(){  this.props.history.push("/home"); }
/**/
 <button onClick={()=>this.myFunction()} className={'btn btn-primary'}>Go 
 Home</button>

使用回调。这对我很管用!

export function addProduct(props, callback) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
    .then(response => {
    dispatch({ type: types.AUTH_USER });
    localStorage.setItem('token', response.data.token);
    callback();
  });
}

在组件中,你只需要添加回调

this.props.addProduct(props, () => this.props.history.push('/cart'))