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

Question

我知道这个问题有点愚蠢，但我对这个网站的产品狩猎他们是如何做到这一点感到非常困惑。当使用 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。到最后，即使路线相同，看到的却完全不同。