react-router-dom v6中<Navigate>传递的state在类组件LoginForm无法获取如何解决

问题产生原因 #

• React Router v6 移除了v5版本自带的withRouter高阶组件，不再默认向路由匹配的组件自动注入location、history等路由相关属性
• <Navigate> 传递的state参数存储在路由上下文的location对象中，你的LoginForm是类组件，没有接入路由上下文，因此this.props为空，无法直接获取state。

解决方案 #

方案1：自定义withRouter高阶组件适配类组件（无需改动原有类组件逻辑，兼容旧代码） #

先定义通用的withRouter高阶组件，通过React Router提供的hooks获取路由属性后注入到类组件的props中：

// 可单独封装到工具文件，也可直接写在loginForm.jsx顶部
import { useLocation, useNavigate, useParams } from 'react-router-dom'

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    const location = useLocation();
    const navigate = useNavigate();
    const params = useParams();
    return (
      <Component
        {...props}
        location={location}
        navigate={navigate}
        params={params}
      />
    );
  }
  return ComponentWithRouterProp;
}

导出LoginForm组件时用该高阶组件包裹即可：

class LoginForm extends React.Component {
  render() {
    // 此处即可获取到传递的state
    console.log('用户原始访问路径', this.props.location.state?.from)
    return // 原有渲染逻辑
  }
}

export default withRouter(LoginForm)

方案2：将LoginForm重构为函数组件，直接调用hooks获取state #

如果可以接受重构为函数组件，代码更简洁：

import { useLocation } from 'react-router-dom'

const LoginForm = () => {
  const location = useLocation()
  console.log('用户原始访问路径', location.state?.from)
  return // 原有渲染逻辑
}

export default LoginForm

内容的提问来源于stack exchange，提问作者wrongman