react-router-dom v6类式组件class实现编程式路由导航

由于react-router-dom升级到6版本后，无法按照this.props.history.push()进行编程式导航，此时props会提示是空值，v6文档里把路由组件默认接受的三个属性给移除了，官网文档里给出的解决方案是使用useNavigate()这个hook，但是hook只能存在于无状态组件，无法用在类组件中，官方文档里给出的类组件实现编程式导航的解决方案如下图：

通过Navigate这个标签来实现路由跳转，但官方其实也不推荐，更推荐去使用hook。

实现方法

因为我是要实现登陆跳转这个功能，不能像之前一样利用history这个属性去控制路由导航，所以官方文档里给出的方法是设置一个state，然后在登陆成功时，改变这个state，在最后渲染组件时，通过state的状态来控制路由的跳转，参考代码如下：

export default class Login extends Component {

  state = {

    user: null,

  }

  render() {

    const { Header, Content, Footer } = Layout

    const NormalLoginForm = () => {

      const onFinish = async (values) => {

        //请求登陆

        const { username, password } = values

        const response = await reqLogin(username, password)

        const { status } = response.data

        if (status === 0) {

          message.success('登陆成功，欢迎' + response.data.user)

          this.setState({ user: response.data.user })

        } else {

          message.error(response.data.msg)

        }

      };

    return (

     

        {this.state.user && (

         

        )}

       

         

商品后台管理系统

         

           

             

           

         

         

©Copyright 2021 Ryan Wu

       

     

    )

  }

}