如何在React-router中找到弹出状态和刷新状态？

Question

我知道这个问题有点愚蠢但是我很困惑这个网站producthunt他们是怎么做的。当点击产品列表弹出反应路由器就像这样做..

但是，当我刷新该页面时，它会像这样渲染。如何使用React-router完成

Answer 1

我的赌注是他们在推送页面时使用state property来向组件提供有关如何呈现页面的指示。更具体地说，表示它来自哪个组件。例如：

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

然后您可以在路线组件中读取路由器的状态，以查看要显示的页面。

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} />
  }
}

因此，当您在浏览器中打开页面时，state.fromPosts未设置，您将被重定向到PostPage。最后，即使路线相同，你最终的结局也完全不同。