React refresh redirects to home with same url of the where page refreshed

Question

I have react router dom to route from one component to another component. Mention the code below that am using for the routing inbetween the components.

<Router>
      <Switch>
        <Route path="/" component={Language} exact />
        <Route path="/termsandconditions" component={TermsConditions} exact />
      </Switch>
</Router>

The actual problem in when I am in the url /termsandconditions, I refreshed the page it will redirect to the Language component with the url of /termsandconditions, If the URL is in /termsandconditions the TermsConditions component would get render while refresh the page.

Any solution for this while refreshing the page. It's would stayed in the component of the current URL.

Answer 1

I think you could have used a session storage to save your last route before page refresh event

window.onbeforeunload = () => {
            window.sessionStorage.setItem('lastRoute', JSON.stringify(window.location.pathname))
        }

Add the code above to your App.js useEffect and then you can access a session storage and get last route and redirect to it.