CODEWITHSUNDEEP
reactjs
RB19
RB19

Reputation: 169

Page does not retain its state on re rendering

In my react app component, I have a table on page with some list of data. On clicking any row on that table it fetches the details of that particular table row via its id and routing to another link like '/parent/:id' using the same parent component. On refreshing the page of single row details, it's taking me back to parent table data i.e on /parent page, but the URL is still /parent/:id.

I want to retain the /parent/:Id page even on refreshing.

Any leads?

Upvotes: 0

Views: 71

Answers (1)

FurkanO
FurkanO

Reputation: 7308

Here is a general approach to such scenarios. I use search params in such a way for the url: 

parent?rowId=2

Then in the parent component you check if the search param includes the rowId as a string. If so show the detail content and hide parent content, if not, show parent and hide detail content.

Parent Component would be something similar to this:

render () {
  const { search } = this.props.location
  const shouldDisplayRowDetail = search.includes('rowId')
  return (
    <div>
       { 
         !shouldDisplayRowDetail && 
         <div> Parent content </div>
       }
       { 
         shouldDisplayRowDetail && 
         <div> Row content </div>
       }
    </div>
  )
}

Upvotes: 1

Related Questions