在Next.js中将Router.events相关代码放在哪里

Question

我只是想知道在哪里可以将与Router.events相关的代码放在Next.js中？显然，我不能将其放在特定的组件中，因为它需要在整个应用程序中使用。

谢谢。

Answer 1

您可以将其放在用于初始化每个页面的自定义App组件中。

https://github.com/zeit/next.js#custom-app

以下是一些示例代码，用于订阅和取消订阅路由器事件：

const eventHandler = (url) => {...};

export default class MyApp extends App {
    constructor(props) {
        super(props);

        Router.events.on("routeChangeComplete", eventHandler);
    }

    componentWillUnmount(){
        Router.events.off("routeChangeComplete", eventHandler);
    }

    ...
}

HTH