Question

在官方documentation上，它表示要访问传递到重定向到的组件的状态，您可以使用 this.props.location.state

但是，我没有使用类组件，因此没有this.。

如何访问重定向组件中的通过状态？

Answer 1

<Redirect
    to={{
       pathname: "/signin",
       state: { from: props.location, alert: true },
     }}
 />

以下功能标识在重定向状态下是否传递了警报。如果alert:true显示<div>

let location = useLocation()
function DashboardRedirectAlert() {
    if (location.state?.alert) {
      return <div className="alert alert-warning">Please Signin first</div>;
    } else {
      return <></>;
    }
  }

当您尝试引用上述功能组件时，请确保始终有返回内容。

Answer 2

在功能组件中，没有此功能，因此您可以通过props.attribute直接显示任何状态。''

Answer 3

您不允许在功能组件中使用this。真正的代码是： Props.location.state。

实际上，this键盘已删除，因为在类组件中，当我们想要访问功能和属性以及状态时，请使用this，但是您使用的是功能组件，因此不需要使用它。

Answer 4

它在功能组件中运作良好。要访问重定向网址中的值使用

{( typeof props.location.state != "undefined" ) && props.location.state }

如果您访问的页面没有重定向，您还需要添加未定义的检查

Answer 5

在功能组件中，state道具在location钩返回的useLocation()对象上可用。

此示例使用optional chaining测试状态是否存在并包含myVariable。

function LinkToComponent(props) {
  return (
    <Link
      to={{
        pathname: `/myRoute/${props.id}`,
        state: { myVariable: true },
      }}
    >
      Click me
    </Link>
  );
}

function LinkedToComponent(props) {
  const location = useLocation();
  // will render only if `myVariable` was passed as `true` in  Link state
  {
    location.state?.myVariable && <p>my variable is true</p>;
  }
}

ReactJS + Router如何访问重定向的状态功能组件

5 个答案: