Блог

У меня проблема с использованием компонента react-router Prompt.

Я хочу предупреждать пользователей, когда они перезагружают или покидают страницу, за исключением 1 случая, когда я добавляю параметр запроса в URL.

Я уже сделал это, но когда я обновляю страницу после внесения изменений. Я возвращаюсь к пути «/», а не к текущей странице, над которой я работаю.

Пример: я работаю над путем «создать-контракт». Затем я хочу добавить запрос?screen={screen}, если пользователи нажимают на кнопку.

Теперь у меня есть «create-contract?screen={screen}», Затем, если я обновлю страницу и подтвержду или вернусь к предыдущему URL-адресу «create-contract» и обновлю.

Я перейду к пути «/». То, что я считаю неправильным.

Я хочу, чтобы он оставался на текущей странице при обновлении.

Здесь код:

 useEffect(() => {
        if (shouldBlockNavigation) {
            const existingHandler = window.onbeforeunload;
            window.onbeforeunload = (event) => {
                if (existingHandler) existingHandler(event);
                return true;
            };
        } else {
            if (screen) {
                history.push("?screen="   screen);
            } else {
                history.push(RouteConstant.Contract.CreateContract.path);
            }
        }
        return () => {
            window.onbeforeunload = null;
        };
    }, [shouldBlockNavigation, screen]);

return (
        <>
            <Prompt
                when={shouldBlockNavigation}
                message="作成中の書類を破棄します。よろしいですか？"
            />
            ...
       </>
)

 

Кто-нибудь, помогите мне, пожалуйста. Спасибо!

Нет информации о том, что является screen переменной.

Мне кажется, что после перезагрузки он переходит к этой части:

 else {
   if (screen) {
      history.push(RouteConstant.Contract.CreateContract.path   "?screen="   screen);
   } else {
      history.push(RouteConstant.Contract.CreateContract.path); // goes here
   }
}
 

Чтобы решить эту проблему, вы можете попытаться получить текущее местоположение, проанализировать его и, если оно содержит ?screen=screen , получить экран с этого URL-адреса и использовать его

Чтобы получить текущее местоположение, вы можете использовать useLocation() из react-router-dom