使用React-Router-DOM的useHistory、useLocation无法跨页面传参怎么办

问题原因 #

你现在的代码同时触发了冲突的路由跳转逻辑：

• 你使用的LinkButton本身是路由链接组件，自带的to属性会触发不带state的路由跳转
• 额外绑定的onClick事件中调用history.push的逻辑，会被LinkButton的默认跳转行为覆盖，导致你携带state的跳转没有生效，最终进入页面时location.state为空

解决方法 #

你可以任选以下两种方案之一修复：

方案1：移除LinkButton的to属性，仅保留history.push跳转逻辑 #

删除按钮的to属性，也可以直接将LinkButton替换为普通Button组件，只依赖onClick的跳转逻辑：

const AddOKRButtons: FC<AddOKRButtonsProps> = ({ parentObjectiveId }) => {
  const history = useHistory();

  const onAddOkrButtonClick = () => {
    history.push('/new-objective', { parentObjectiveId: parentObjectiveId });
  };

  const onAddKrButtonClick = () => {
    history.push('/new-kr', { parentObjectiveId: parentObjectiveId });
  };

  return (
    <OkrDetailsChildrenCardsButtonContainerCentered>
      <ButtonGroup>
        <Button appearance="default" onClick={onAddOkrButtonClick}>
          Add a new sub-objective
        </Button>
        <Button appearance="default" onClick={onAddKrButtonClick}>
          Add a new key-result
        </Button>
      </ButtonGroup>
    </OkrDetailsChildrenCardsButtonContainerCentered>
  );
};

方案2：直接通过LinkButton的to属性传递state，不需要额外写跳转逻辑 #

路由Link类组件的to属性支持传入对象，同时指定跳转路径和携带的state，不需要手动调用history.push：

const AddOKRButtons: FC<AddOKRButtonsProps> = ({ parentObjectiveId }) => {
  return (
    <OkrDetailsChildrenCardsButtonContainerCentered>
      <ButtonGroup>
        <LinkButton 
          to={{
            pathname: "/new-objective",
            state: { parentObjectiveId }
          }} 
          appearance="default"
        >
          Add a new sub-objective
        </LinkButton>
        <LinkButton 
          to={{
            pathname: "/new-kr",
            state: { parentObjectiveId }
          }} 
          appearance="default"
        >
          Add a new key-result
        </LinkButton>
      </ButtonGroup>
    </OkrDetailsChildrenCardsButtonContainerCentered>
  );
};

修改完成后，目标组件就可以通过useLocation正常获取到传递的state值。

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