如何使用 React 读取当前的完整 URL？

在 React 应用程序中，为了实现路由、条件渲染或日志记录等各种功能，我们经常需要读取当前的完整 URL。实现这一目标通常有两种常见的方法：一种是使用原生的 INLINECODE04948912 对象，另一种是使用 INLINECODEa87b726f 提供的 useLocation 钩子。

前置条件：

• NPM & NodeJS
• ReactJS
• React Hooks
• React Router

设置 ReactJS 应用程序的步骤

第一步： 使用以下命令创建一个 ReactJS 应用程序

npx create-react-app url-reader

第二步： 导航到项目文件夹

cd url-reader

第三步： 使用以下命令在项目中安装必要的包/库。

npm install react-router-dom

项目结构：

!Screenshot-(101).png)

package.json 文件中更新后的依赖项将如下所示：

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3",
  }

以下是我们要介绍的方法：

目录

• 使用 window.location
• 使用 useLocation 钩子

使用 window.location

在这种方法中，我们将使用包含当前浏览器 URL 信息的 INLINECODE19a892c6 对象。这里我们将使用它的 INLINECODE8574b565 属性来获取完整的 URL 字符串。

语法：

window.location.href

示例： 下面的示例使用 window.location 来获取当前完整 URL。

JavaScript


CODEBLOCK_5879e180


JavaScript


CODEBLOCK_43ea7367


JavaScript


CODEBLOCK_19fae725

运行应用程序的步骤： 从项目的根目录使用以下命令运行应用程序

npm start

输出： 您的项目将显示在 URL http://localhost:3000/ 中

!wnd1

使用 useLocation 钩子

INLINECODE9984dfca 钩子由 INLINECODE22c93859 库提供，是专门为 React 应用程序设计的。它提供了一种响应式的方式来访问当前位置，使其更适合具有复杂路由需求的应用程序。

示例： 下面的示例使用 useLocation 钩子来获取当前完整 URL。

JavaScript


CODEBLOCK_0d741aa3


JavaScript


CODEBLOCK_7f511892


JavaScript


“

import Rea