React Router 中的歷史物件

1. React 路由歷史
2. 為重定向 React 路由歷史記錄
3. React Router V4 中的 history.push()

導航是任何現代應用程式的重要組成部分。基於 JavaScript 的框架通常依賴預設歷史物件作為其不同導航解決方案的基礎。此物件可用作 DOM 的 Window 物件的屬性。

在 React 中開發應用程式時，開發人員可以使用 React Router 庫。它提供了所有導航功能，包括歷史包，瀏覽器歷史記錄介面的改進版本。React Router history 物件包括許多我們可以用來配置導航的屬性和方法，例如 action、location、.push() 或 .replace()。我們將在下面的部分中回顧如何最好地使用這些屬性和方法來處理關鍵的導航需求。

React 路由歷史

history 包（或簡稱為 history）是在 JS 中管理會話歷史所需的關鍵工具。如前所述，它包括許多方法，所有這些方法都以自己的方式有用。儘管如此，history.push() 方法可以說是最重要的，也將是我們指南的主要焦點。

歷史堆疊

瀏覽器會跟蹤使用者訪問的不同 URL。這個會話歷史被稱為歷史堆疊，它是瀏覽器的後退或前進按鈕工作所必需的。

History 物件具有可以影響歷史堆疊的屬性和方法。例如，.replace() 方法替換歷史堆疊上的最新路徑。 .length 屬性為我們提供了堆疊中的條目數。

.push() 方法可能是最重要和最廣泛使用的方法。開發人員使用它將條目推送到堆疊中，將使用者重定向到另一個頁面。這種方法是必不可少的，我們將在本指南的後面部分詳細討論它。

位置

location 物件顯示有關應用程式當前（有時是過去）路徑名的資訊。React Router 使這個物件多次可用。例如，它可以作為 props 物件的屬性在 Route 元件中訪問。在官方 React Router 文件上了解更多資訊。

history 物件也有 location 屬性。但是，history 物件是可變的，因此不建議使用 location 屬性的值。相反，你可以通過 <Route> 的 props 訪問 location。這樣，你就可以確定你正在訪問正確的位置資訊。

為重定向 React 路由歷史記錄

在開發應用程式時，你經常需要在使用者執行操作後更改使用者的路徑。為此，你需要設定事件處理程式並使用 .push() 方法重定向到特定路徑名。

React Router V5 中的 history.push()

自從引入鉤子後，功能元件變得更加有用。隨著 v5 的釋出，react-router-dom 也開始提供一個 useHistory() 鉤子來更容易地訪問歷史物件。讓我們看一個實際的例子：

import { useHistory } from "react-router-dom";
function Homepage() {
  let historyObj = useHistory();
  function handleClick() {
    historyObj.push("/");
  }
  return (
    <div>
    ...
    <button onClick={() => handleClick()}>
      Go to Homepage
    </button>
    ...
    </div>
  );
}

在這個例子中，我們有一個簡單的 Homepage 元件。首先，我們從 react-router-dom 包中匯入 useHistory 鉤子。你必須安裝 react-router-dom（或更高版本）的第 5 版才能使其正常工作。鉤子返回元件的 history 物件，儲存在 historyObj 變數中。

我們可以在處理函式中使用前面提到的 .push(string) 方法，它接受一個字串引數。它將字串推送到歷史堆疊並將使用者帶到指定的路徑。

React Router V4 中的 history.push()

React Router 的第 4 版不包含 useHistory 掛鉤，因此你必須通過 props 傳遞 history 物件。這也是訪問與鉤子不相容的類元件中的歷史的唯一方法。

你可以使用處理程式函式中的 .push() 方法導航到另一個路徑。讓我們看一下這個例子：

function handleClick() {
  this.props.history.push('/')
}

要通過 props 訪問 history 物件，你必須確保你的元件可以訪問它。有兩種方法可以這樣做。

1. 使用 <Route> 上的 component 屬性將其與特定元件連結。例如：

<Route path="/" component={Homepage} />

在這種情況下，Homepage 元件將可以通過 props 訪問 history 物件。

2. 使用 render 屬性定義一個函式。提供 props 並使用以下語法：

<Route path="/" render={(props) => <Homepage {...props} />}/>