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 (
      <div>
        {this.state.user && (
          <Navigate to='/admin' replace='true' />
        )}
        <Layout>
          <Header>商品后台管理系统</Header>
          <Content>
            <div className="login_container">
              <NormalLoginForm />
            </div>
          </Content>
          <Footer>&copy;Copyright 2021 Ryan Wu</Footer>
        </Layout>
      </div>
    )
  }
}

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