在 React 中獲取當前 URL

1. 在 React 中獲取當前 URL - Vanilla JavaScript 解決方案
2. 通過 React Router 獲取當前 URL
3. 獲取當前 URL React Router Hooks

在 React 中開發單頁應用程式時，路由是難題的關鍵部分。在每個 URL 上，可能有需要顯示的元件或其他視覺效果。

在構建 React 應用程式時，開發人員通常需要根據當前 URL 執行各種操作。開發者可以使用多個不同的介面來訪問當前的 URL。

在 React 中獲取當前 URL - Vanilla JavaScript 解決方案

由於 React 基於常規 JavaScript，你可以訪問 window 介面上的 location 屬性。要獲取當前 URL 的完整路徑，你可以使用 window.location.href，而要獲取沒有根域的路徑，請訪問 window.location.pathname。

讓我們看一下這個例子：

class App extends Component {
  render() {
    console.log(window.location.href);
    return <h1>Hi! Try edit me</h1>;
  }
}

如果你在 playcode.io 上呈現 App 元件，控制檯將顯示你專案的完整 URL。在這種情況下，這將是 https://playcode.io/837468/。如果你改為 console.log(window.location.pathname)，控制檯輸出將是 /837468/。按照這個 link 自己試一下程式碼。

讀取 window.location 是獲取當前 URL 的一個很好的簡單解決方案。但是，它依賴於一般的 window.location 介面。

如果你正在尋找特定於 React 的解決方案，請繼續閱讀。

通過 React Router 獲取當前 URL

React 提供 history-package，並通過 props 分隔 location 物件。它本質上與 window 介面上可用的 location 物件相同，但它是為 React 定製的。

此物件表示應用程式的當前 URL。訪問它的最簡單方法是讀取 props 的 location 物件。

但是，要通過 props 提供 location，你必須安裝 React Router，並且子元件必須連線到 Route 元件。例如：

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

在這個例子中，App 元件將可以通過 props 訪問 location 物件。在這個元件中，我們可以讀取 this.props.location.pathname，它將返回一個不包含根域的路徑 URL。

使用 <Route> 元件呈現的子元件也可以訪問 location 屬性。下面是一個例子：

<Route path="/" render={() => <App></App>} />

在這種情況下，App 元件仍將保留對 location props 的訪問許可權。

如果 this.props.location 返回 undefined，則你的 React 元件很可能在自定義 <Route> 元件之外呈現。在這種情況下，你可以匯入高階元件 (HOC)withRouter 並使用它來訪問 location 和 history props。

withRouter 可以從 react-router-dom 包中匯入。下面是一個例子：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class App extends Component {
      render(){...}
}

export default withRouter(App)

將預設匯出 App 元件包裝在 withRouter HOC 中將允許你訪問 props，否則這些元件僅可用於使用特殊 <Route> 元件呈現的元件。

獲取當前 URL React Router Hooks

功能元件允許你使用鉤子。在我們的情況下，useLocation() 是一個很好的鉤子，它提供了一種訪問 location 物件的簡單方法。

它可以從 react-router-dom 包中匯入。此示例使用 useLocation() 掛鉤獲取 location 物件並將其儲存在變數中。

我們來看一下：

import { useLocation } from "react-router-dom"
const sampleLocation = useLocation();

將 location 物件儲存在變數中後，你可以通過訪問 sampleLocation.pathname 來訪問路徑（沒有根域的 URL）。

你還可以訪問 history 物件的 location 屬性。

useHistory 掛鉤允許你訪問它。然而，由於可變性問題，官方 react-router 文件 建議堅持使用 location 物件。