如何使用 JavaScript 或 React 获取当前 URL

在前端开发中，获取当前页面的 URL 是一个常见的需求。本文将介绍如何使用 JavaScript 或 React 获取当前 URL。

使用 JavaScript 获取当前 URL

JavaScript 提供了 window.location 对象，可以很方便地获取当前 URL 的各个部分。以下是获取 URL 各个部分的方法：

// 获取完整的 URL
const url = window.location.href;

// 获取协议（例如：http、https）
const protocol = window.location.protocol;

// 获取主机名（例如：www.example.com）
const host = window.location.host;

// 获取域名（例如：example.com）
const hostname = window.location.hostname;

// 获取端口号（例如：8080）
const port = window.location.port;

// 获取路径名和查询参数（例如：/path/to/page?query=value）
const pathnameAndQuery = window.location.pathname + window.location.search;

// 获取路径名（例如：/path/to/page）
const pathname = window.location.pathname;

// 获取查询参数（例如：?query=value）
const search = window.location.search;

// 获取哈希（例如：#section）
const hash = window.location.hash;

使用 React 获取当前 URL

在 React 中，可以通过 useLocation 钩子来获取当前 URL 对象。这个钩子返回一个对象，包含了 URL 的各个部分。以下是获取 URL 各个部分的方法：

import { useLocation } from "react-router-dom";

function MyComponent() {
  const location = useLocation();

  // 获取完整的 URL
  const url = location.href;

  // 获取协议（例如：http、https）
  const protocol = location.protocol;

  // 获取主机名（例如：www.example.com）
  const host = location.host;

  // 获取域名（例如：example.com）
  const hostname = location.hostname;

  // 获取端口号（例如：8080）
  const port = location.port;

  // 获取路径名和查询参数（例如：/path/to/page?query=value）
  const pathnameAndQuery = location.pathname + location.search;

  // 获取路径名（例如：/path/to/page）
  const pathname = location.pathname;

  // 获取查询参数（例如：?query=value）
  const search = location.search;

  // 获取哈希（例如：#section）
  const hash = location.hash;

  // ...
}

以上就是使用 JavaScript 或 React 获取当前 URL 的方法。如果你有其他的方法，也欢迎在评论区分享。