Adds back in `useBlocker` and `usePrompt` to `react-router-dom` version 6.0.2 (t...

Would be cool if this would only prompt if 'MyComponent was no longer going to be rendered as a result of continuing - for example, you could be navigating a child component, leaving the form completely intact

Copy link

i am getting a TS2339: Property 'block' does not exist on type 'Navigator'. error when using typescript.

@AdnanTheExcellent It seems like it's a typescript issue, you need to add "block" to the interface definition here

@WhiteYaksha so to add this i need to fork the repo and add this manually?

@hackerghost93 - I'm sure you got this sorted out by now, but I used patch package myself. If you install patch-package you can make the fix. Then you can run the patch-package tool. Then whenever your modules are installed the patch will then be applied. you can read more about his package at the following link.

https://www.npmjs.com/package/patch-package

it's not the best way to do, who else has another way, of change node modules it will fail, please help, thanks

@leminhhung-NamiQ that is highly dependent on the type of change that you do to the node module and the context of that change.

From my point of view this is a small change to a type interface applied to a specific version of a the react-router module. Yes, at some point in the future this patch might fail, however, the risk is minimal. The way I see it at the moment is you can:

1. Update the type interface through patching the package.
2. Ignore the type error for now.
3. Fork the repo and make the change yourself.

If you plan to fork the repo you might as well patch the package. If you lock your node module to a specific version and then watch for updates to react router you should be fine. Based upon this comment it would appear the intention is to bring "block" back.

remix-run/react-router#8139 (comment)

Can't you just extend the type and use as?

Copy link

There is a working Typescript version here: https://stackoverflow.com/a/71587163/8046487

import { History, Transition } from 'history';

• tx is a Transition
• as for navigator:

type ExtendNavigator = Navigator & Pick<History, "block">;
[...]
const unblock = (navigator as any as ExtendNavigator).block(...