在前端开发中，跳转到外部 URL 是一个非常常见的需求。在 Next.js 中，我们可以使用内置的 next/link 组件来实现内部路由跳转，但是对于跳转到外部 URL，我们需要使用其他方式来实现。
本文将介绍在 Next.js 中如何跳转到外部 URL，并提供详细的指导和示例代码。
使用 window.location.href
跳转到外部 URL 最简单的方式就是使用 JavaScript 中的 window.location.href 属性。我们可以通过设置 window.location.href 的值来实现页面跳转。
示例代码：
-------- --------------- - -------------------- - ------------------------- -
在 Next.js 中，我们可以将上面的代码封装成一个函数，然后在需要跳转的地方调用即可。
使用 window.open
除了使用 window.location.href，我们还可以使用 window.open 方法来跳转到外部 URL。不同于 window.location.href 直接跳转，window.open 方法会在新的浏览器窗口中打开指定的 URL。
示例代码：
-------- -------------------- - ------------------------------------- ---------- -
同样地，我们可以将上面的代码封装成一个函数，然后在需要跳转的地方调用即可。
在 Next.js 中使用 useRouter
在 Next.js 中，我们可以使用 useRouter hook 来获取路由信息，并使用 push 方法来实现路由跳转。但是，push 方法只能用于内部路由跳转，无法跳转到外部 URL。
为了实现跳转到外部 URL，我们可以使用 window.location.href 或 window.open 方法，但是这样的方式会让我们失去使用 useRouter hook 的便利性。
为了解决这个问题，我们可以使用 next/router 模块中的 replace 方法。replace 方法允许我们使用 JavaScript 中的 location.replace 方法来实现路由跳转，同时保留使用 useRouter hook 的便利性。
示例代码：
------ - --------- - ---- -------------- -------- --------------- - ----- ------ - ------------ ----------------------------------------- -
总结
跳转到外部 URL 是一个非常常见的需求，在 Next.js 中我们可以使用 window.location.href 或 window.open 方法来实现。但是，如果我们想要保留使用 useRouter hook 的便利性，我们可以使用 next/router 模块中的 replace 方法。
希望本文能够帮助你在 Next.js 中实现外部 URL 跳转。如果你有任何问题或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65bf7017add4f0e0ff8fe768