react中使用js的方式进行路由跳转

因为之前使用vue的 所以哈 习惯性拿过来进行比较 在vue中是使用 路由的实例化对象 是一个数组然后让里面push 路由的信息
一般来说 name和params搭配 path和query搭配 使用

this.$router.push({})

不过vue倒不是今天的主题

在react脚手架 很难受的一点就是 路由需要你自己来配置 路由不用js的方式跳转是使用 人家提供的 Link的一个组件进行跳转的

<Link to="/home">跳转到首页</Link>

这种方式常见 但是还有一个是通过js的方式 来跳转的 但有点复杂

需要引入一个 Redirect组件

import {Redirect} from "react-router-dom"
constructor(props) {
        super(props)
    
      this.state = {
      		flag:flase;
       } 
   }

我们不能直接在方法中进行跳转 是在状态中 声明一个标量 通过改变变量的值 判断是否重定向到新的路由中的这种方式

go=()=>{
	this.setState({
		flag:!this.state.flag
	})
}
render() {
        if(this.state.flag){
            return <Redirect to="/home"> </Redirect>
        }
        return (
             <div>
				<button onClick={this.goHome}>跳转到首页</button>
			</div>
        )
    }

这样就实现了 关注我 持续更新 react vue 小程序相关知识 小白通往架构师的填坑之路