How to clear props.location.state on refresh?

Question

I am navigating to another page where in am passing some data like so:

this.props.history.push({
  pathname: "/someotherpage",
  state: { somedata: somedata }
});

Now on /someotherpage, I have a condition in my render() method to show a component depending on whether this.props.location.state is not null.

{this.props.location.state && (
    <SomeComponent>
        {this.props.location.state.somedata}
    </SomeComponent>
)}

It's working. However, when I refresh the page, <SomeComponent> still shows up as it still has the this.props.location.state.somedata stored even if I refresh. How do I clear this.props.location.state back to null when refreshing the page? (It seems to clear though when navigating away, only on refresh it gets retained.)

think-serious · Answer 1 · 2020-07-03T18:35:24.770

12

Use window.history.replaceState(null, '') to clear the location state after the value is consumed.

MDN Web Docs: History.replaceState()

The History.replaceState() method modifies the current history entry, replacing it with the stateObj, title, and URL passed in the method parameters

Syntax: history.replaceState(stateObj, title, [url]);

It's safe to leave title blank and url is optional.

The main point is that It doesn't cause another refresh.

edited Jul 03 '20 at 18:35

answered Jan 23 '20 at 16:16

think-serious

1,229
2
12
27

The problem with this approach is that it wipes out all the history and it affects the forward button. Any other idea of how to fix this? – Alfrex92 Jul 03 '20 at 08:33
1

it's working thanks! this should be the correct answer – Alfrex92 Jul 06 '20 at 01:59
1

`history.replace('' null);` Isn't working for me. It's redirecting me to / But using `history.replace(location.pathname, null);` is working fine! – Anurag Bhagsain Sep 05 '20 at 04:28

score 6 · Accepted Answer · answered Nov 13 '18 at 10:45

6

Try this:

history.replace('', null);

answered Nov 13 '18 at 10:45

Ashish Kirodian

816
7
13

Close enough.. I used history.replace('/currentroute', null); – catandmouse Nov 14 '18 at 02:49
didn't work for me, I've this error `Property 'replace' does not exist on type 'History'` – Alfrex92 Jul 03 '20 at 09:00
Check your import. I think you are importing the wrong History module. It should be import { History } from 'history'; – Ashish Kirodian Jul 03 '20 at 09:45
`history.replace('' null);` Isn't working for me. It's redirecting me to / But using `history.replace(location.pathname, null);` is working fine! – Anurag Bhagsain Sep 05 '20 at 04:30

Alakbar · Answer 3 · 2020-01-30T15:39:56.557

As a workaround you can add function like below to differentiate page refresh from this.props.history.push as below:

isPageRefreshed() {
    return window.performance && performance.navigation.type === 1;
  }

Then when you want to check if it is refreshed or redirected from other page, you can use like that

{!this.isPageRefreshed && this.props.location.state && (
    <SomeComponent>
        {this.props.location.state.somedata}
    </SomeComponent>
)}

Reference: https://stackoverflow.com/a/50026758/8777471

score 1 · Answer 4 · edited Feb 15 '22 at 15:15

1

You can do this by setting the current history entry's state to null like this:

const { state, pathname } = useLocation();

history.replace(pathname, null);

edited Feb 15 '22 at 15:15

Niels Abildgaard

2,662
3
24
32

answered Feb 10 '22 at 08:29

Shagun Sharma

19
3

How to clear props.location.state on refresh?

4 Answers4