'ReactRouterDom, trigger an event on page change

I have a component that is a navigation bar. The navigation bar persists within all screens in specific parts of my project, and is the highest level component at all given times.

Is it possible to somehow get a page-change event (so if I go from say, /main/viewer to /main/documents ) without having a callback triggering a pagechange going from navigation bar all the way down to the viewer component?

These components are nested in each other, as the NavBar displays main screen, which then directs to different component for different screens, which in turn have components that call different screens based on buttons pressed, etc etc.

I'm trying to get the simplest way to get a page-change event, so that I can trigger a function in viewer, which prompts to save any edits done, if page is about to be changed through the nav-bar (or another means) and not via a button in the viewer.

currently, I navigate between pages/components by using this.,props.history and then either .push("path", props) and .goBack() which is usually the last line on a function to handle exiting the component.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source