使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页

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

window.location.href="target_page"

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!