react-router4.2使用js控制路由跳转的3种方式

一、背景

  • 在很多情况下,我们需要用js来控制页面的路由切换,而不是通过Link标签这种方式,比如有这样一个场景,用户要登陆一个网站才能看到网站里面的内容,登录接口是一个独立的子页面,登陆成功后,才能进入网站浏览相关内容,使用react做SPA时就需要做路由的切换。

二、react-router4.2

  • 在网上随处可见react-router入门使用方式,通过链接绑定组件实现跳转,或者绑定hashHistory后,妄想在子组件中使用this.props.history.push('/某路径')实现路由跳转,诚然,在以前的版本是可行的,据说,反正我没用过。而奇葩的4.2版本并不支持这种方式。我在网上看了许久,试了诸多办法,任然无法通过上述方式实现js控制路由切换,emmm...

三、问题解决办法

使用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>)

方法一、在子组件里使用
先要引入Redirect

   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
import PropTypes from 'prop-types';

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

弱鸡全栈攻城狮

2k 声望
4.6k 粉丝
0 条评论
推荐阅读
复杂场景下的h5与小程序通信
在套壳小程序盛行的当下, h5调用小程序能力来打破业务边界已成为家常便饭,h5与小程序的结合,极大地拓展了h5的能力边界,丰富了h5的功能。使许多以往纯h5只能想想或者实现难度极大的功能变得轻松简单。但在套壳...

懒懒的技术宅16阅读 3k评论 5

你可能需要的多文档页面交互方案
在日常工作中,面对不同的需求场景,你可能会遇到需要进行多文档页面间交互的实现,例如在 A 页面跳转到 B 页面进行某些操作后,A 页面需要针对该操作做出一定的反馈等等,这个看似简单的功能,却也需要根据不同...

熊的猫8阅读 1.2k

封面图
把React新文档投喂给 GPT-4 后...
大家好,我卡颂。最近,React新文档终于上线了。从内容上看,新文档包括:理论知识、学习指引API介绍从形式上看,新文档除了传统的文字内容,还包括:在线Demo示意图小测验可以说是阅读体验拉满。但是,由于文档...

卡颂7阅读 7.5k评论 3

封面图
PDF 预览和下载你是怎么实现的?
在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能,PDF 类型文件的来源又包括 H5 移动端 和 PC 端,而针对这两个不同端的处理会有些许不同,下文会有所提及。

熊的猫7阅读 3.7k评论 1

封面图
第九期:前端九条启发分享
下图是一个常见的列表, 点击列表里的详情按钮会跳到详情页, 那么也许我们在详情页修改了数据状态, 此时可能需要把修改后的状态直接传给列表页从而本地直接更新列表, 这样就不用发送新的api请求与后端交互了。

lulu_up8阅读 842

Next.js-集成状态管理器共享access token以及刷新access token解决方案
SSR和SPA最大的区别就是SSR会区分客户端Client和服务端Server,并且SSR之间只能通过cookie才能在Client和Server之间通信,例如:token信息,以往我们在SPA项目中是使用localStorage或者sessionStorage来存储,但...

Awbeci4阅读 9k评论 2

3个容易混淆的前端框架概念
大家好,我卡颂。有3个容易混淆的前端框架概念:响应式更新单向数据流双向数据绑定在继续阅读本文前,读者可以思考下是否明确知道三者的含义。这三者之所以容易混淆,是因为他们虽然同属前端框架范畴内的概念,但...

卡颂6阅读 912

封面图

弱鸡全栈攻城狮

2k 声望
4.6k 粉丝
宣传栏