做web页面,无论你是使用Jquery,还是使用React,都会用到页面跳转功能,当然谁都知道的方法是直接使用location跳转,如下:

window.location.href="target_page"

但如果你使用 React + Redux 的话,这样的跳转就相当于页面跳出,会重新加载css/js,而且前一个页面的状态(store里面存的state就清空为默认状态了)就没了,这导致两个问题:

1. 想要获取前一个页面的状态无法获取,你可以通过跳转的url传递参数,如: window.location.href="target_page?arg1=xxx&agr2=yyy"
2. 按后退按键,返回前一个页面,那个页面也要重新加载css/js/数据
   

这显然不是我们想要的,也就不是纯属的单页面应用了. 而且这也不是React官方推荐使用的方法

我上网找来找去,有说用push,但我没成功

this.props.history.push("/target_page") //报错: this.props.history is undefined

最后还是万能的stackoverflow找到了解决方法,其实可以使用 react-router-dom 的Redirect功能,优雅的实现页面跳转,代码如下

import { Redirect } from 'react-router-dom';

// ... your class implementation

handleOnClick = () => {
  // some action...
  // then redirect
  this.setState({redirect: true});
}

render() {
  if (this.state.redirect) {
    return <Redirect push to="/sample" />; //or <Redirect push to="/sample?a=xxx&b=yyy" /> 传递更多参数
  }

  return <button onClick={this.handleOnClick} type="button">Button</button>;
}

或者这样写Redirect

<Redirect to={{
  pathname: '/login',search: '?utm=your+face',state: { referrer: currentLocation }
}}/>

使用上面的方法就可以简单方面的进行跳转了,而且全局store状态还维持着不会改变,下一个页面也不会重新加载/css/js,才这是真正的单页面应用嘛!!!!!

参考:

https://stackoverflow.com/questions/29244731/react-router-how-to-manually-invoke-link

https://reacttraining.com/react-router/web/api/Redirect

原文链接：https://www.f2er.com/react/302858.html