This only works for client-side navigations within your React Router application and will not block document requests. To prevent document navigations you will need to add your own `beforeunload` event handler.
useBlocker 是React Router v6 中引入的一个钩子(Hook),它允许你阻止用户离开当前位置,并呈现一个自定义的 UI,让用户确认是否要导航。这对于防止表单数据丢失或确保用户完成重要操作非常有用。 在数据路由中,useBlocker 的作用更加显著,因为它能够利用数据路由提供的上下文(context)来管理路由状态和导航行为。
What version of React Router are you using? "react-router-dom": "^6.22.3", Steps to Reproduce Create some routes with createBrowserRouter(). Create a Modal which shows something. Example code import React from "react"; import types, { MODAL_VARIANTS } from "./modal-types"; import style...
import { useEffect, useCallback } from 'react'; import { useLocation, useBeforeUnload, useBlocker } from 'react-router-dom'; import { validate as validateUUID } from 'uuid'; const useNavigationBlocker = ( shouldBlock: boolean, checkSearchParams?: boolean, ) => { const location = useLocati...
This only works for client-side navigations within your React Router application and will not block document requests. To prevent document navigations you will need to add your own `beforeunload` event handler. Blocking a user from navigating is a bit of an anti-pattern, so please carefully ...
Documentation for React Router API Reference
What version of React Router are you using? 6.23.1 Steps to Reproduce Take the example from https://github.com/remix-run/react-router/blob/main/examples/navigation-blocking/src/app.tsx and remove the user input based confirmation and rep...
What version of React Router are you using? 6.27.0 I was able to repro the bug. This is a stackblitz with an environment that allows you to repro. I used 6.27.0 https://stackblitz.com/edit/github-ypgwe9?file=src%2Fapp.tsx,src%2Fmain.tsx ...
Description A low-level API could be nice for enabling the user to implement all kinds of use cases around link interception, such as: Next.js > Intercepting Routes React Router > useBlocker Vike already implements a rough PoC for this, ...
I really love the loaders feature in v6.4+ and wanted to be able to keep using that while being able to move forward with a migration that relies onusePrompt- so implemented a version pretty similar to previous react-router versions here: ...