How does react-router persist location state over page refreshes? : <p>I am just so very confused.</p>

<p>I have a workflow where someone can start to fill out a form for a product. It is a long form and I want to save progress to the server as they type (but not until they fill it out for a bit). So we start at a url for creating the form, after they've typed for a bit, we POST to create a resource on the server, and after the request finishes, we update the url to the edit route with the new id.</p>

<p>In other words, you start filling out the form at url <code>/product</code> then after you've filled it out for a bit the url shifts to <code>/product/123</code>. After that, loading that URL gives you your form.</p>

<p>So basically I have</p>

<pre><code>&lt;Route path={`/product`} exact component={CreateProduct} /&gt;
</code></pre>

<p>and</p>

<pre><code>&lt;Route exact={true} path="/product/:productId" render={({
      match: {params: {productId}},
      location: {state: {data}={}}
  }) =&gt; (
    &lt;EditProduct productId={productId} initialData={data} 
  )} /&gt;
</code></pre>

<p>See that state? That's because the way I do the switch over from create to edit mode is something like this</p>

<pre><code>const id = await apiFetch(`/api/product`, data, {method: `POST`})
this.props.history.push({pathname: `/product/${id}`, state: {data} })
</code></pre>

<p>in the constructor of my <code>&lt;EditProduct&gt;</code> component I have</p>

<pre><code>constructor({productId, initialData}) {
   this.super()
   this.state = {}
   if(initialData)
     this.setState({data: initialData})
   else
     getProduct(productId).then(({data}) =&gt; this.setState({data}))
}
</code></pre>

<p>By doing that, the initial data into the <code>&lt;EditProduct&gt;</code> is seeded from the <code>&lt;CreateProduct&gt;</code> component and I don't need to reload it from the server or anything.</p>

<p>This works, the transition is smooth, the url updates, and everything is hunky dory.</p>

<p>I can now continue editing the <code>&lt;EditProduct&gt;</code> component and it saves properly. I can open a new tab to the same url and it loads everything up and I can continue. This happens because in that situation <code>initialData</code> is <code>undefined</code> so its loaded from the server. yay!</p>

<p><strong>BUT</strong></p>

<p>If I instead <em>refresh <strong>the original</strong> tab</em> things get weird. Any changes that have accumulated since the save are lost. Drilling down in the debugger I see the issue is that <code>initialData</code> passed from the <code>location.state.data</code> object is not empty - it is the initial object from when the product was first created. </p>

<p>So where on earth does it come from? I just did a full page refresh (even a "hard" refresh with no cache and devtools open). That data isn't in the URL (and in fact copy pasting the url into another tab in the same window doesn't have this issue).</p>

<p>The only mechanism I'm aware of that can persist data across refreshes but not to new tabs like this is <code>sessionStorage</code>, yet when I check it in the console, I am told</p>

<pre><code>&gt; sessionStorage
&lt; Storage {length: 0}
</code></pre>

<p>I've even thought that maybe react router is manipulating session storage just before the page unloads and just after it loads, but breaking on the first line of my javascript bundle shows the exact same thing.</p>

<p>So how on earth is this persistence happening!?</p>
