Detecting user leaving page with react-router-dom v6.0.2
Tags: javascript, react, routing, typescript
Published: 2022-01-23 13:25:25

## Introduction:
Before reading this article you should know about React Routing, its working.

Main Focus of this post is detecting user leaving page with react-router-dom v6.0.2.

You can use **usePrompt** or **useBlocker** to detect and show a prompt before leaving to another route if they have any unsaved changes.

However, in the [official documentation](https://reactrouter.com/docs/en/v6/upgrading/v5) of react router v6 the following is mentioned:

_from v5 (along with usePrompt and useBlocker from the v6 betas) are not included in the current released version of v6._

But there are two different solution to achieve your goal.

1. Either you can downgrade to v5 or 6.0.0-alpha.5 to use **usePrompt** & **useBlocker** in you project/code

2. Second solution is create **custom hook** instead of downgrading.

## Post Focus useCallbackPrompt & useBlocker custom hooks

In my today's post I will focus on my second solution how did I created a custom hook to resolve my problem.

for this I created a small project for demo.
Here is the project link [GITHUB](https://github.com/Bilal-Bangash/detecting-route-change-react-route-dom-v6).

In this project I created two routes for Home and About page and in Home Page there is simple form with Name and Designation Field.
My goal was when user type something on form and trying to leave this page or route prompt/DialogBox will be shown that there are some changes.....

how my folder structure looks like
![useCallbackPrompt Hook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ponb5adwnjok7kyku19a.png)
in above screenshot I highlighted the custom hooks that I created in this project

- **useBlocker**

- **useCallbackPrompt**

## useCallbackPrompt Hook
![useCallbackPrompt Hook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdnzytjxt9t8zpztyqen.png)
this hooks returns three things 2 boolean variables and 1 function. Basically for handling DialogBox to show or hide 
here is the exact file for that [useCallbackPrompt Hook](https://github.com/Bilal-Bangash/detecting-route-change-react-route-dom-v6/blob/master/src/hooks/useCallbackPrompt.ts)

## useBlocker Hook

![useBlocker Hook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6pfm3qbgixv842iuqe2.png)

this hook basically blocks user from navigating away if there are any changes

[useBlocker Hook](https://github.com/Bilal-Bangash/detecting-route-change-react-route-dom-v6/blob/master/src/hooks/useBlocker.ts)

## Now Question arise How I am using this in my project 
 
![useBlocker Hook Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p56b0n7l23545xgnzusi.png)
What I am doing here when user type something handleChange will trigger and update the showDialog to **true** and I am passing **showDialog** to **useCallbackPrompt** and when user trying to navigate away a prompt will be shown 
![Home page Code Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yg6ts3ffswwkv324dj6x.png)
 
[Home Page](https://github.com/Bilal-Bangash/detecting-route-change-react-route-dom-v6/blob/master/src/pages/Home.page.tsx)

Here is [Live Demo Link](https://detect-user-leaving-page-react-router-dom-v6.netlify.app/home)

Here is [Git Repo Link](https://github.com/Bilal-Bangash/detecting-route-change-react-route-dom-v6)

Further improvement, suggestion or help. Welcome :)