react router如何在刷新页面时保持位置状态?

我只是很困惑。

/product 然后,在您填写了一段时间后,url将转移到 /product/123

所以基本上我有

<Route path={`/product`} exact component={CreateProduct} />

和

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

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

<EditProduct> 我拥有的组件

constructor({productId, initialData}) {
   this.super()
   this.state = {}
   if(initialData)
     this.setState({data: initialData})
   else
     getProduct(productId).then(({data}) => this.setState({data}))
}

通过这样做,初始数据进入 < 是从 <CreateProduct>

我现在可以继续编辑 <编辑产品> initialData 是 undefined

但是

如果我代替 原作 制表符 事情变得很奇怪。保存后累积的任何更改都将丢失。在调试器中深入研究我发现问题在于 初始数据 从 location.state.data 对象不是空的-它是产品首次创建时的初始对象。

那么它到底是从哪里来的呢?我只是做了一个完整的页面刷新(即使是没有打开缓存和devtools的“硬”刷新)。该数据不在URL中(事实上,将URL粘贴到同一窗口中的另一个选项卡中并不存在此问题)。

我知道的唯一一种机制可以跨刷新保存数据,但不能保存到像这样的新选项卡 sessionStorage ,但当我在控制台中检查时,我被告知

> sessionStorage
< Storage {length: 0}

我甚至认为react router可能在页面卸载之前和加载之后操作会话存储,但是在javascript包的第一行中断显示了完全相同的事情。

那么,这种坚持到底是怎么发生的呢!?