如何在反应中获取URL - JavaScript

在反应（React）中获取URL可以帮助我们获取当前页面的URL，并执行相应的操作。下面是在JavaScript中获取URL的几种方式：

方法1：使用window.location.href

const url = window.location.href;
console.log(url);

这种方法会返回完整的URL，包括协议、主机名、路径和查询参数。例如：https://www.example.com/path?key=value。

方法2：使用window.location.protocol、window.location.hostname、window.location.pathname和window.location.search

const protocol = window.location.protocol;
const hostname = window.location.hostname;
const pathname = window.location.pathname;
const search = window.location.search;
console.log(protocol);   // 输出：https:
console.log(hostname);   // 输出：www.example.com
console.log(pathname);   // 输出：/path
console.log(search);     // 输出：?key=value

这种方法允许你获取URL的不同部分，以便根据需要对其进行处理。

方法3：使用URL对象

const url = new URL(window.location.href);
console.log(url.href);        // 输出：https://www.example.com/path?key=value
console.log(url.protocol);    // 输出：https:
console.log(url.hostname);    // 输出：www.example.com
console.log(url.pathname);    // 输出：/path
console.log(url.search);      // 输出：?key=value

使用URL对象可以更方便地获取URL的各个部分，并可以执行其他与URL相关的操作，例如添加、删除或修改查询参数。

以上是几种常用的在React中获取URL的方法，你可以根据自己的需求选择适合的方法来获取URL，并根据需要对其进行处理。