react-router4.2使用js控制路由跳转的3种方式
发布时间:2020-12-15 06:31:24 所属栏目:百科 来源:网络整理
导读:一、背景 在很多情况下,我们需要用js来控制页面的路由切换,而不是通过Link标签这种方式,比如有这样一个场景,用户要登陆一个网站才能看到网站里面的内容,登录接口是一个独立的子页面,登陆成功后,才能进入网站浏览相关内容,使用react做SPA时就需要做路
一、背景
二、react-router4.2
三、问题解决办法使用4.2里面的Redirect标签?组件?,不知道怎么称呼 具体如下: 先定义路由(表): import { BrowserRouter as Router,Route,Switch } from 'react-router-dom'; <Router > <div style={{height:'100%'}}> <Switch> <Route exact path="/" component={LoginPage}/> <Route path="/chat" component={Chat}/> <Route path="/home" component={Home}/> <Route path="/login" component={Login}/> </Switch> </div> </Router>) 方法一、在子组件里使用 import { Redirect } from 'react-router'; class Login extends React.Component { render() { const {isRegisterNewUser,loginSuccess}=this.props; const { getFieldDecorator} = this.props.form; if(loginSuccess){ *return (<Redirect to="/chat" />);* }else{ return( 这里放没登陆之前的各种form表单 ) } } } 方法二、来自下面的大佬:静对94 static contextTypes = { router: PropTypes.object.isRequired,} console.log(this.context.router) 例如: class Login extends React.Component { static contextTypes = { router: PropTypes.object.isRequired,} render() { const {isRegisterNewUser,loginSuccess}=this.props; const { getFieldDecorator} = this.props.form; if(loginSuccess){//登陆状态变为成功 this.context.router.history.push('/chat) }else{ return( 这里放没登陆之前的各种form表单 ) } } } 方法三、来自Inori_Lover 大佬推荐的官方文档:使用withRouter解决 import {withRouter } from 'react-router'; class Login extends React.Component { static contextTypes = { router: PropTypes.object.isRequired,} render() { const {isRegisterNewUser,loginSuccess,history}=this.props; const { getFieldDecorator} = this.props.form; if(loginSuccess){//登陆状态变为成功 this.props.history.push('/chat) }else{ return( 这里放没登陆之前的各种form表单 ) } } } ... const Login=withRouter(connect(mapStateToProps,mapDispatchToProps)(TLogin)) export default Login; 如果你没有使用redux,那么你使用withRouter的正确姿势应该是 const Login=withRouter(TLogin) export default Login; 四、重点就是:感谢各位大佬的指点,是我太浮躁,没认真阅读文档,以后一定多看。不管什么方式,解决问题才是最重要的。 参考连接:stackoverflow (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容