How to know which component was being rendered before the page was refreshed without using react-router?

Question

Basically what I want to do is when page refreshes I want the same component to be rendered that was rendered when the page was refreshed. How do I get the name of the component that was being rendered. Also I have not used react-router anywhere in my project. Is it possible to do what I am asking without react-router?

I have used onbeforeunload event to detect page refresh. Now what should I do in its function to render the same component? This code is in my app.js component's componentDidMount()

window.onbeforeunload = function(e) { e.preventDefault()
  return console.log('Hello123')
};

This is logging Hello123 in the console.The only problem is to get the name of the last rendered component. Is there any way to make the app remember the name of last rendered component and after refresh check if there a name and render that component if there is one.

for example suppose I am rendering a component called TravellerList and on a button click I am rendering the component called AddTraveller. Now how do I get the name of the component that is being rendered and store it in a variable Without using react-router ?

Answer 1

I think you have to use local-storage or Cookie if you want to get values after page refresh because after page refresh all the objects in JavaScript will be refreshed. what you can do is create a local-storage or cookie object like in the Highest level component.

var myObj = {
        component1Rendered:false,
        component2Rendered:false,
        component3Rendered:false,
        component4Rendered:false

    };  

Then set value to that object when u Render some Component As an Example: In Component1 inside componentDidMount in all components update that object as they rendered.

        componentDidMount() {
        var myObj = {
            component1Rendered:true,
            component2Rendered:false,
            component3Rendered:false,
            component4Rendered:false

        };

            localStorage.setItem('storeObj', JSON.stringify(myObj));
        // please not that this is a sample set statement in your scenario update only the specific value of that object in local-storage 
       }

After Page Refresh happens check the local-storage object find the components that have rendered previously using your function,

window.onbeforeunload = function(e) { e.preventDefault()
  return console.log('Hello123')
 storeObj = localStorage.getItem('storeObj');
// Filter storeObj and get the rendered components
};

Answer 2

can you try this one

  componentDidMount() {
      window.addEventListener('beforeunload', this.onBeforeUnload);
  }
  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.onBeforeUnload);

  }
  onBeforeUnload = (e) => {
    const msg = 'Do you want to leave this site?\n\nChanges you made may not be saved.';
    e.returnValue = msg;
    return msg;
  }

you need react-router. check this React Router - Stay at the same page after refresh