react router

в react router 6 версии можно так:

import {
    useLocation
} from "react-router-dom";

export default function Index() {

    const location = useLocation();

Но если мы попытаем использовать рядом с компонентом меню (чтобы напр. выводить ли шапку в шаблоне "вокруг" маршрутизируемой части страницы), то получим:

useLocation() may be used only in the context of a component.

На момент написание данной статьи можно написать решение для BrowserRouter, переопределив функцию-пропс, которая отвечат за показ сообщения (передав пустую), но в отличии от Router BrowserRouter не дает работать напрямую с объектом истории history, что не всегда подходит.

Хорошим решением является использование для вывода диалога уведомления или вообще вывода чего угодно при отлеживании действий, использование пакета
react-router-navigation-prompt

-- он отлично работает из коробки.

Главная идея

Основные мысли:

Определим собственный компонент на базе ссылки из react route:

Решить данную задачу можно с помощью кода вроде: