javascript - 如何在 React-router 中找到 Popup 状态和刷新状态？

Question

我知道这个问题有点愚蠢但是我很困惑这个网站 producthunt 他们是怎么做到的。当点击产品列表弹出窗口时， react 路由器是这样完成的..

但是当我刷新那个页面时，它呈现成这样......这是如何使用 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。到头来，即使是同一条路线，得到的也完全不同。