如何防止位置对象在重新加载 reactjs 时重置

Question

I am using Link to re-direct call another component. Something like this

<Link to={{ pathname: "/app/" + app.appId, appDetail: { app: app } }}>>

On calling path /app/:appId It calls AppDetails Component. And I'm getting appDetail object in location object.

But on reloading the route /app/:appId this appDetail in location object is becoming undefined. So How can I prevent this so that on reloading /app/:appId this appDetail from the location object should not get undefined

Answer 1

there are many ways you can control this behavior here is one: try putting location object in if condition like:

if(!location) {
  return <>Loading...</>
}

this above condition will hold execution till condition meets

Answer 2

There is state property to pass data to other component. So you can do something like this:

<Link to={{
  pathname: "/app/" + app.appId,
  state: { appDetail: { app: app }}
}}>

And get appDetail in other component:

const { appDetail } = this.props.location.state;