如何在反应中点击另一个页面 - JavaScript

在 Web 开发中，经常需要通过用户的交互来控制不同的页面之间的跳转。在 JavaScript 中，我们可以使用 window.location 对象来实现这个功能。

使用 window.location

window.location 对象包含了当前页面的信息，包括 URL、协议、主机名、端口号等。为了打开另一个页面，我们可以简单地设置 window.location 的值为目标页面的 URL，如下所示：

window.location.href = 'https://www.example.com';

这个代码片段将会把当前页面跳转到 https://www.example.com。在实际应用中，我们通常会在响应事件中执行这个代码片段，以便在用户点击某个按钮或链接时触发跳转。

相对路径与绝对路径

在设置 window.location.href 时，我们可以使用相对路径或绝对路径来指定目标页面的 URL。如果我们使用相对路径，那么目标页面的 URL 将基于当前页面的 URL 计算。例如，假设我们当前页面的 URL 是 https://www.example.com/foo/bar.html，那么下面两个代码片段是等效的：

window.location.href = 'baz.html'; // 相对路径
window.location.href = '/foo/baz.html'; // 绝对路径

最终，这两个代码片段都将跳转到 https://www.example.com/foo/baz.html。

需要注意的是，相对路径和绝对路径的分别适用于不同的场景。使用相对路径时，我们可以在不同的页面之间灵活跳转，而不必关心页面的实际位置。但如果当前页面的 URL 发生改变，那么相对路径的跳转行为也会发生变化。因此在一些情况下，我们可能需要使用绝对路径来确保跳转的正确性。

修改部分 URL

除了完全替换 URL 外，window.location 还提供了一些其他的属性和方法，以便修改 URL 的不同部分。例如，我们可以使用 window.location.hash 来修改页面的锚点，或使用 window.location.search 来修改查询字符串，如下所示：

// 修改页面的锚点
window.location.hash = 'section-2';

// 修改页面的查询字符串
window.location.search = '?page=2';

以上代码片段会将当前页面的 URL 修改为类似于以下的形式：

https://www.example.com/foo/bar.html#section-2?page=2

需要注意的是，这种方式只适用于其中一部分 URL 信息的修改，而不能像使用 window.location.href 那样完全替换 URL。如果我们需要在修改 URL 的同时跳转到新页面，那么仍需要使用 window.location.href。

总结

在 JavaScript 中，我们可以使用 window.location 对象来控制页面间的跳转和 URL 的修改。具体而言，我们可以使用以下属性和方法：

• window.location.href：完全替换 URL，跳转到新页面。
• window.location.hash：修改页面的锚点。
• window.location.search：修改页面的查询字符串。

同时，我们还需要注意相对路径与绝对路径的区别，以确保跳转行为的正确性。