在 React js 中的页面之间导航

Question

我正在尝试实现一个按钮，当在 React Js 中单击该按钮时会更改到另一个屏幕，但是当我尝试使用它时，它给了我一个errror: TypeError: Cannot read property '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;

Answer 1

使用 withRouter HOC 包装您的组件，它会在渲染时将更新的匹配、位置和历史道具传递给包装的组件。

https://reactrouter.com/web/api/withRouter

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


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 withRouter(Link);

Answer 2

默认情况下您没有历史记录。 您可以使用“useHistory”或“withRouter” HOC 来获取它。

“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);

但无论如何，这不是一个好的用户体验方法。 我建议像这样使用反应路由器“链接”：

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 Link，您将拥有一个<a />因此用户也可以在他/她的浏览器中将该链接作为新选项卡打开。 还有更好的SEO！