如何通过重定向组件传递道具（方法）

Question

我知道如何通过状态来重定向组件，如下所示。

<Redirect
    to={{
      pathname: "/login",
      state: { isLoggedIn: this.state.isLoggedIn }
    }}
 />

但是，我找不到如何通过方法重定向组件的方法。我想要的是传递一种方法（handleLogin）来重定向组件，如下所示。你能帮忙吗？

<Redirect
    to={{
        pathname: "/login",
        state: { handleLogin: this.handleLogin }
     }}
 />

Answer 1

您不能在Reprop的prop的state属性中传递函数。仅允许可序列化的数据。这遵循了本地历史api的行为，该行为由react-router利用的history软件包使用。有关更多详细信息，请参见this issue。还要注意，通常不建议使用状态的注释

  

尽管试图通过state.state传递状态，但我要提醒您不要将其用于临时数据。当您直接导航到页面时，location.state始终为null，因此必须具有内置的安全防护措施才能处理此问题。

为了根据重定向的来源来处理登录表单中的不同行为，我可能会在查询字符串中传递一些可序列化的数据，然后使用该数据来决定在{{ 1}}。像这样：

/login

Answer 2

我刚遇到类似的问题。

对于我来说，我需要通过<Redirect />将一个函数传递给组件，所以我要做的是创建另一个属性来传递该函数。 （对不起，如果我使用了错误的术语，刚开始编码两个月）。

在您的情况下，这就是我会尝试的。

<Redirect
  to={{
       pathname: "/login",
       handleLogin: this.handleLogin,
       state: { isLoggedIn: this.state.isLoggedIn }
     }}
/>