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

问题缘由

在做登陆界面练习的时候偶然发现在设置点击跳转路由时，无法进行按照this.props.history.push()进行路由导航，调试时发现props居然是空值，就很奇怪，路由组件不是默认接受三个属性的吗？咋就突然没有了。然后一查文档，发现v6（上周更新的）把这几个props给移除了，给出的解决方案是，useNavigate()这个hook，由于hook只能存在于无状态组件中，因此这个方法没法用在class里。然后发现官方文档中给出了类式组件的一个解决方案，如下图。

通过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
        
      
    )
  }
}

代码里面省略了一些组件的定义内容，但是关键思路和步骤是，将Navigate标签和state绑定，用大括号包起来，但说实话，这个方法显的异常臃肿，但类式组件现在实在是没有办法，看来只有尽早替换成hooks才能避免这些臃肿的编码过程。