How to read the current full URL with React?

在 React 中获取当前完整的 URL 可以通过多种方法实现，主要取决于你是否在使用路由库，如 react-router。下面我会分别说明在使用 react-router 和不使用任何路由库的情况下，如何获取当前的完整 URL。

1. 使用 react-router

如果你的项目中集成了 react-router, 可以通过使用 useLocation 钩子（Hook）来获取当前的 URL。这里是一个具体的例子：

jsx
import React from 'react';
import { useLocation } from 'react-router-dom';

function CurrentUrlComponent() {
  const location = useLocation();
  const currentUrl = window.location.origin + location.pathname + location.search + location.hash;

  return (
    <div>
      当前的 URL 是: {currentUrl}
    </div>
  );
}

在这个例子中，useLocation 钩子提供了 location 对象，该对象包含了关于当前 URL 的详细信息，如路径名（pathname）、查询参数（search）和哈希值（hash）。window.location.origin 用来获取域名和协议部分。

2. 不使用任何路由库

如果你的 React 项目中没有使用 react-router 或任何其他路由库，可以直接使用 JavaScript 的 window.location 对象来获取当前的 URL：

jsx
import React from 'react';

function CurrentUrlComponent() {
  const currentUrl = window.location.href;

  return (
    <div>
      当前的 URL 是: {currentUrl}
    </div>
  );
}

在这个例子中，window.location.href 提供了当前窗口的完整 URL。

总结

无论是在使用 react-router 还是直接通过 JavaScript 的全局 window 对象，获取当前 URL 都是非常直接的。通过这些方法，你可以根据项目的具体需求选择最适合的方式来实现。