How do I clear location.state in react-router on page reload?

Question

I am currently passing my state on route change like below:

<Link to={{            pathname:`/transactions/${props.transaction.id}`,            state: {transaction: props.transaction}          }}> View Details </Link> 

My logic is that if "location.state.transaction" exists, don't fetch new data, else, fetch data.

Now the flaw is when there is a page reload. The application needs to fetch new data if the user reloads the page. I thought "location.state" would get cleared if there is a reload, but apparently the state is saved in sessionStorage.

How do I work around this? I could just fetch new data every time, but it should not fetch data when the 'View Details' Link is clicked.

Answer 1

I also ran into this problem, and what I ended up doing was retrieving the browser history from react router and clearing specific location.state properties. So in your case, it would be transaction. I did this in componentDidMount so that after the first time you go to the page, that property should no longer be there,

import createHistory from 'history/createBrowserHistory'  ...  componentDidMount(){     const history = createHistory();     if (history.location.state && history.location.state.transaction) {         let state = { ...history.location.state };         delete state.transaction;         history.replace({ ...history.location, state });     } } 

Answer 2

There is better approach without using the 3 party library.

We can use history.replace()

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md

componentDidMount(){  const {location,history} = this.props;  //use the state via location.state  //and replace the state via  history.replace()  }