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