在 React 中獲取當前 URL

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中獲取當前 URL - Vanilla JavaScript 解決方案
  2. 通過 React Router 獲取當前 URL
  3. 獲取當前 URL React Router Hooks
在 React 中獲取當前 URL

在 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。訪問它的最簡單方法是讀取 propslocation 物件。

但是,要通過 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 並使用它來訪問 locationhistory 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 物件。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn