React Router Dom v6 重定向登录页如何传递获取错误提示

你无法通过this.props.alert的方式访问传递的提示内容，React Router v6 不会将路由跳转时携带的state直接挂载到组件顶层props上，需要通过官方提供的API获取。

函数组件获取方式（匹配你当前写的Login函数组件） #

直接使用react-router-dom导出的useLocation Hook即可，步骤如下：

• 在登录组件文件中导入useLocation
• 组件内部调用该Hook拿到当前路由的location对象，跳转时携带的state就存储在location.state字段下
• 增加空值兜底逻辑，避免用户直接访问登录页时（此时没有携带state）出现JS报错

修改后的登录组件代码：

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

function Login() {
  const location = useLocation();
  // 可选链做安全取值，没有传alert时默认是空字符串
  const alertTip = location.state?.alert ?? '';

  return (
    <div>
      <h1>Login page</h1>
      {/* 存在提示信息时才渲染提示块 */}
      {alertTip && <p className="auth-tip">{alertTip}</p>}
    </div>
  );
}

补充说明 #

• 你之前在PrivateRoute组件中通过<Navigate>的state属性传参的写法是完全正确的，不需要调整
• 如果是类组件场景，由于无法直接使用Hook，可以自己实现一个简单的withRouter高阶组件包裹类组件，之后就能从props.location.state中拿到传递的内容，v6版本官方已经移除了内置的withRouter导出，优先推荐函数组件配合Hook的实现方式
• 路由携带的state是存储在浏览器内存中的，页面刷新后是否保留取决于你使用的路由模式，history模式下刷新会丢失state，如果需要持久化提示可以搭配sessionStorage存储

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