/

nextjs-router

＃如何使用Next.js路由器

学习如何使用next/router包来控制Next.js中的路由

在使用Link连接两个页面的Next.js上，我们看到了如何使用Link组件在Next.js应用中声明式地处理路由。

在JSX中管理路由非常方便，但有时您需要以编程方式触发路由更改。

在这种情况下，您可以直接访问Next.js的路由器，它位于next/router包中，并调用其push()方法。

下面是访问路由器的示例：

1
2
3
4
5
6
import { useRouter } from 'next/router'

export default () => {
 const router = useRouter()
 //...
}

通过调用useRouter()来获取路由器对象之后，我们可以使用它的方法。

这是客户端路由器，因此方法应仅在前端代码中使用。最简单的方法是将调用包装在useEffect() React钩子中，或者在React有状态组件中的componendDidMount()内部。

您最常使用的是push()和prefetch()。

push()允许我们以编程方式触发URL更改，如前端代码所示：

1
router.push('/login')

prefetch()允许我们以编程方式预取URL，在没有自动处理预取的Link标签时非常有用，如下所示：

1
router.prefetch('/login')

完整示例：

1
2
3
4
5
6
7
8
9
import { useRouter } from 'next/router'

export default () => {
 const router = useRouter()

 useEffect(() => {
 router.prefetch('/login')
 })
}

您还可以使用路由器来监听路由变更事件。

tags: [“Next.js”, “router”, “routing”, “frontend”, “programming”]