Javascript 在React js中的页面之间导航

我正在尝试实现一个按钮，当我在React Js中单击“更改到另一个屏幕”时，它会给我一个error:TypeError:Cannot read属性“push”of undefined。我不知道还能做什么。我做错了什么？谢谢

import LinkForm from "./LinkForm";
import Links from "./Links";
import { db } from "../firebase";
import { Switch, Route } from "react-router-dom";

const Link = (props) => {
  const addOrEditLink = async (linkObject) => {
    await db.collection("links").doc().set(linkObject);
    console.log("New Task Added");
  };

  return (
    <div>
      <LinkForm addOrEditLink={addOrEditLink} />
      <button
        onClick={() => {
          props.history.push("/Links");
        }}
      >
        Go Home
      </button>
    </div>
  );
};

export default Link;

---

使用withRouter HOC包装组件，它将在包装组件呈现时向其传递更新的匹配、位置和历史道具

---

默认情况下，您没有历史记录。您可以使用useHistory或withRouter获得它

useHistory示例：

import LinkForm from "./LinkForm";
import Links from "./Links";
import { db } from "../firebase";
import { useHistory } from "react-router-dom";

const Link = (props) => {
  const addOrEditLink = async (linkObject) => {
    await db.collection("links").doc().set(linkObject);
    console.log("New Task Added");
  };
  const history = useHistory();

  return (
      <div>
        <LinkForm addOrEditLink={addOrEditLink} />
        <button
            onClick={() => {
              history.push("/Links");
            }}
        >
          Go Home
        </button>
      </div>
  );
};

export default withRouter(Link);

但无论如何，这不是一个好的UX明智的方法。 我建议像这样使用react路由器链接：

import LinkForm from "./LinkForm";
import Links from "./Links";
import { db } from "../firebase";
import { Link as ReactRouterLink } from "react-router-dom";

const Link = (props) => {
  const addOrEditLink = async (linkObject) => {
    await db.collection("links").doc().set(linkObject);
    console.log("New Task Added");
  };

  return (
    <div>
      <LinkForm addOrEditLink={addOrEditLink} />
      <ReactRouterLink to="/Links"> // or you mean `/${Link}`
        Go Home
      </button>
    </div>
  );
};

export default Link;

---

通过使用react router链接，您将拥有一个新的链接，因此用户也可以在其浏览器中以新选项卡的形式打开该链接。还有更好的搜索引擎优化

你没有提供足够的信息。正在使用的组件是什么样子的？请注意，似乎您还没有将历史作为道具传递给链接组件。history=useHistory；history.push/随便什么；您有一个功能组件。您打算作为一个HoC来执行此操作，还是希望使用钩子？如果你想通过道具传递信息，你需要提供更多关于如何设置道具的信息。

import LinkForm from "./LinkForm";
import Links from "./Links";
import { db } from "../firebase";
import { Link as ReactRouterLink } from "react-router-dom";

const Link = (props) => {
  const addOrEditLink = async (linkObject) => {
    await db.collection("links").doc().set(linkObject);
    console.log("New Task Added");
  };

  return (
    <div>
      <LinkForm addOrEditLink={addOrEditLink} />
      <ReactRouterLink to="/Links"> // or you mean `/${Link}`
        Go Home
      </button>
    </div>
  );
};

export default Link;