CODEWITHSUNDEEP
javascriptreactjsreact-router
Nane
Nane

Reputation: 423

How to find Popup state and refresh state in React-router?

I know this question kind a stupid But I am pretty confused with this site producthunt how they are doing this.When clicking the product list popup with react router is done like this.. enter image description here

But When I refresh that page it render like this..How this is done using React-router enter image description here

Upvotes: 2

Views: 131

Answers (1)

Christopher Chiche
Christopher Chiche

Reputation: 15345

My bet would be that they use the state property when pushing a page to give an indication to the component about how to render the page. More specifically, to indicate the component where it comes from. For example: 

router.push({
  pathname: '/posts/origami-studio-by-facebook',
  state: { fromPosts: true }
})

And then you can read the router's state in the route's component to check what page to show. 

const Post = (productName) => {
  if(this.context.router.location.state.fromPosts) {
    return <Posts productPopup{productName} /> 
    // open the posts page with a popup for the product
  } else {
    return <PostPage productName={productName} />
  }
}

So when you open the page in your browser, the state.fromPosts is not set and you get redirected to the PostPage. In the end, even if the route is the same, what you end up seing is completely different.

Upvotes: 2

Related Questions