Normal Updating LeaveCreateClusterPrompt to use React router compatibility package.
This subtask has uncertainty in implementation because the component uses history.block
useEffect(() => {
let unblock;
if (!isOpen) {
// Open the prompt and capture the destination path meant to navigate to so that
// if the user decides to leave, we send them to the intended route.
unblock = history.block((location, action) => {
// Return to the original URL within the browser history.
if (action === 'POP')
{ window.history.forward(); }
setDestinationLocation(location);
setIsOpen(true);
return 'true';
});
} else
{ unblock?.(); }
return () => { unblock?.(); }
;
}, [history, isOpen]);
React Router v6 introduced new hooks to deal with this usePrompt and useBlocker. But these hooks can only be used within data routers.
1. Not going to work
<BrowserRouter> <Routes> <Route> </Route> </Routes> </BrowserRouter>
2. The supposed way to go to use usePrompt and useBlocker
// Create a router instance using createBrowserRouter and createFromElements const router = createBrowserRouter( createFromElements( // Define your route structure <Route path="/" element={<HomePage />} />, <Route path="about" element={<AboutPage />} /> ) ); // Render the application const container = document.getElementById('root'); const root = createRoot(container); root.render( <RouterProvider router={router} /> );
The issues arises from migration guide
It seems that we will have to entirely remove our BrowserRouter and it will depend on the way it will be implemented in Chrome. If it is going to be non data router we wont be able to use usePrompt or useBlocker at all. Without those components there seems not to be the way to replicate history.block