在 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！