如何监听路由器的变化并强制 class 组件重新渲染？

Question

使用框架 Next.js 和 class 组件，我正在尝试获取实际查询以更新 DOM。我正在使用 next/router 获取路由器，但它 return 是前一个，而不是实际的 url。这是一个例子：

当用户第一次访问包含该表单的页面时，会出现：

路线: /signup?option=signup
表单呈现：登录

如果用户单击指向 /signup?option=login 的 Link next/Link，将出现：

路线: /signup?option=login
表单呈现：登录

所以，以这个为例，我想知道如何监听路由器并强制虚拟 DOM 在发生变化时再次 rnder。

以下是我获取路由器并将其传递给 class 组件的方式：

import { withRouter } from 'next/router'

class Register extends Component {
    constructor({router, ...props}) {
        super(props);
        this.state = {  
            completed: false,
            signup: router.query.option=='signup'? true: false, //This works the very first time
   }
   }
   ...
  }
export default withRouter(Register);

提前感谢您抽出宝贵时间回答问题！

Answer 1

您正在使用 next/router

它提供了一个事件 routeChangeComplete 当路由改变时会触发。

这应该有帮助

https://nextjs.org/docs/api-reference/next/router#userouter

这是您可能如何使用它的示例代码。

componentDidMount(){
        router.events.on('routeChangeComplete', (url, {shallow})=>{
            console.log(url, shallow);
            // compare your state and new hash url here and update the state based
            // on requirements
        });
    }

如何监听路由器的变化并强制 class 组件重新渲染？

How to listen to changes in router and force to a class component to re-render?

reactjs

next.js

next-router