javascript - How to clear props.location.state on refresh? - Stack Overflow

admin管理员组

文章数量:1186444

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.)

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.)

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Nov 13, 2018 at 10:37 catandmouse asked Nov 13, 2018 at 10:31 catandmousecatandmouse 11.8k2424 gold badges9595 silver badges157157 bronze badges 0

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 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.

Try this:

history.replace('', null);

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

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

const { state, pathname } = useLocation();

history.replace(pathname, null);

本文标签： javascriptHow to clear propslocationstate on refreshStack Overflow