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

Question

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

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

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

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

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

因此，以此为例，我想知道如何监听路由器并在这种情况发生变化时强制虚拟 DOM 再次运行。

这是我获取路由器并将其传递给类组件的方式：

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
        });
    }