使用 setRouteLeaveHook (withRouter) 时出错 [英] Getting an error on using setRouteLeaveHook (withRouter)

问题描述

目前我正在使用 ReactJS 构建一个 Web 应用程序.该应用有一个注册表单.

Currently I'm building a Web App using ReactJS. The app has a registration form.

现在考虑，用户已经开始注册过程.但是在提交表单之前，用户离开了这个注册页面.此时，假设表单包含未保存的数据，我想显示一条确认消息，说明在离开此屏幕之前保存您所做的更改.

Now consider, user has started with the registration process. But before submitting the form user leaves this registration page. At this point, say form contains unsaved data and I would like to display a confirmation message saying that Save Changes you have made before leaving this screen.

以下是我实现此目的的代码

Below is my code to achieve this

  componentDidMount () {
    this.props.router.setRouteLeaveHook('/enterprise/enterprise-area/enterprise-details', this.routerWillLeave);
  }

  routerWillLeave(nextLocation) {
    // return false to prevent a transition w/o prompting the user,
    // or return a string to allow the user to decide:
    if (true) {
      return 'Your work is not saved! Are you sure you want to leave?';
    }
  }

export default withRouter(connect(
  mapStateToProps,{
  initializeVendorDetails
})(VendorRegistration));

我收到如下所示的错误:

I get the error shown below:

Uncaught TypeError: Cannot assign to read only property '__id__' of /enterprise/enterprise-area/enterprise-details

我浏览了官方文档和 github 问题，但一无所获.感谢期待.

I went through official documentation and github issues but found nothing. Thanks in anticipation.

推荐答案

@NobuhitoKurose 感谢您的回复.最后我设法找出了这里的问题.

@NobuhitoKurose Thanks for your reply. Finally I manage to figure out the problem here.

是的，我的组件没有直接连接到路由.

我经历了withRouter 文档，我发现我实际上需要提供一个路由对象(this.props.route)作为第一个参数而不是路由作为一个字符串(正如我在以上代码).

I went through withRouter doc where I found that I actually need to provide a route object(this.props.route) as a first parameter instead of route as a string(as I mentioned in above code).

由于我的组件没有直接连接到路由，所以我将 this.props.route 设为未定义.

Since my component is not directly connected to route I was getting this.props.route as undefined.

我检查了父组件(连接到路由)并且这个组件有它的路由属性.所以我只是将这个路由道具从父组件传递到这个当前组件(我在那里使用 withRouter)，一切都运行良好.

I checked parent component (which is connected to route) and this component has its route prop. So I just pass this route prop from parent component to this current component (where I'm using withRouter) and everything has worked well.

下面是我更新的代码

在父组件中(连接到路由)

In parent component (which is connected to route)

<VendorRegistration route={this.props.route}/>

我使用 withRouter 的组件

Component where I'm using withRouter

componentDidMount() {
    this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave);
}

routerWillLeave(nextLocation) {
  // return false to prevent a transition w/o prompting the user,
  // or return a string to allow the user to decide:
  // FIXME: update condition as per requirement
  if (true) {
    return 'You have unsaved information, are you sure you want to leave this page?';
  }
}

export default withRouter(connect(
  mapStateToProps,{
  initializeVendorDetails
})(VendorRegistration));

这篇关于使用 setRouteLeaveHook (withRouter) 时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！