如何使用重定向组件传递道具（方法）答案

【问题标题】：How to pass props(method) with Redirect component如何使用重定向组件传递道具（方法）
【发布时间】：2019-05-04 07:27:29
【问题描述】：

我知道如何将状态传递给重定向组件，如下所示。

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

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

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

【问题讨论】：

如果您对像 redux 这样更复杂的状态管理系统不感兴趣，您愿意使用 React Context API。
我们不能在状态中传递一个函数，但是你对handleLogin的要求是什么，也许这里的人可以建议你一个处理它的好方法
非常感谢您的回答。如您所料，我想使用该功能更改父组件的某些状态。有没有办法做到这一点？很简单，handleLogin 可以是这样的。 handleLogin() { this.setState(state => ({ isLoggedIn: true })); }
@AnnaLee 你有没有想过如何使用传递一个方法？

标签： reactjs redirect state

【解决方案1】：

我刚刚遇到了类似的问题。

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

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

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

【讨论】：

【解决方案2】：

您不能在 Redirect 的 to 属性的 state 属性中传递函数。只允许可序列化的数据。这遵循 react-router 使用的 history 包使用的本机历史 api 的行为。有关详细信息，请参阅this issue。另请注意，通常不建议使用状态的 cmets

虽然通过 location.state 传递状态很诱人，但我会警告不要将它用于除临时数据之外的任何内容。当您直接导航到某个页面时，location.state 始终为 null，因此您必须有内置的安全防护来处理此问题。

为了根据重定向的位置处理登录表单中的不同行为，我可能会在查询字符串中传递一些可序列化的数据，然后使用这些数据来决定在@987654322 处呈现的组件中做什么@。所以是这样的：

// Redirect
<Redirect to={`/login?param1=a`} />

// Login component
import qs from "qs";

class Login extends React.Component {
  login = () => {
    const { param1 } = qs(this.props.location.search);
    if (param1 === "a") {
      // Do something
    } else {
      // Do something else
    }
  }

  render() {
    <button onClick={this.login} type="button">Login</button> 
  }
}

【讨论】：