How to implement router leave guard like vue-router in react-router-dom?

I need to ask user if submit form or not in react project like in vue-router beforeRouteLeave guard:

<script>
export default {
  name: 'RolePage',
  methods: {
    http() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({ ok: true })
        }, 200)
      })
    },
  },
  async beforeRouteLeave(to, from, next) {
    const answer = window.confirm('Do you want submit form?')
    answer && (await this.http())
    next()
  },
}
</script>

This work well when user click goback and forward button in browser menu and Programmatic Navigation work as well. How can I implement the same requirement in react-router-dom?

from How to implement router leave guard like vue-router in react-router-dom?