Next.js 中，如何跳转到外部 URL

在前端开发中，跳转到外部 URL 是一个非常常见的需求。在 Next.js 中，我们可以使用内置的 next/link 组件来实现内部路由跳转，但是对于跳转到外部 URL，我们需要使用其他方式来实现。

本文将介绍在 Next.js 中如何跳转到外部 URL，并提供详细的指导和示例代码。

使用 window.location.href

跳转到外部 URL 最简单的方式就是使用 JavaScript 中的 window.location.href 属性。我们可以通过设置 window.location.href 的值来实现页面跳转。

示例代码：

function redirectToUrl() {
  window.location.href = 'https://www.google.com';
}

在 Next.js 中，我们可以将上面的代码封装成一个函数，然后在需要跳转的地方调用即可。

使用 window.open

除了使用 window.location.href，我们还可以使用 window.open 方法来跳转到外部 URL。不同于 window.location.href 直接跳转，window.open 方法会在新的浏览器窗口中打开指定的 URL。

示例代码：

function openUrlInNewWindow() {
  window.open('https://www.google.com', '_blank');
}

同样地，我们可以将上面的代码封装成一个函数，然后在需要跳转的地方调用即可。

在 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 的便利性。

示例代码：

import { useRouter } from 'next/router';

function redirectToUrl() {
  const router = useRouter();
  router.replace('https://www.google.com');
}

总结

跳转到外部 URL 是一个非常常见的需求，在 Next.js 中我们可以使用 window.location.href 或 window.open 方法来实现。但是，如果我们想要保留使用 useRouter hook 的便利性，我们可以使用 next/router 模块中的 replace 方法。

希望本文能够帮助你在 Next.js 中实现外部 URL 跳转。如果你有任何问题或建议，请在评论区留言。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bf7017add4f0e0ff8fe768