在 React 的 history.push() 中传递按钮 ID

Question

我两个按钮如下图。我正在使用此代码使用 history.push 将用户导航到注册页面。我想将某种数据传递到 Registration 页面，例如根据按钮单击用户是否是“志愿者”或“正当理由”。我知道它相对简单，但我无法弄清楚。谢谢。

let history = useHistory();
  const handleClickRegistration = () => {
    history.push({
      pathname: '/Registration',
    });
  };

这是我调用函数的地方

          type="submit"
          variant="contained"
          id="volunteer"
          className={classes.button}
          style={{margin: 8}}
          onClick={handleClickRegistration}
        >
      Register as a Volunteer
    </Button>

Answer 1

如果您在两个按钮上使用相同的功能，请像这样使用它

<Button onClick={()=> handleClickRegistration("volunteer")} >Register as a 
Volunteer</Button>

<Button onClick={()=> handleClickRegistration("good_cause")} >Register as a 
Good Cause</Button>

并在 handleClickRegistration 函数中发送 history.push 方法中的状态

const handleClickRegistration = (userType) => {
history.push({
  pathname: '/Registration',
  state: { userType: userType }
});
};

你可以在 Registration rotue 中获得

在 React 的 history.push() 中传递按钮 ID

Passing button id in history.push() in React

react-router

browser-history