我想在点击一个按钮时在 ReactJS 中渲染一个模式。你可以在 Product Hunt 的网站上看到一个例子：
如果您单击其中一个热门产品，它会打开一个模式，然后页面会在服务器端呈现为正常请求。
我对 React 不是很好，但是有人可以指出我正确的方向或显示代码示例吗？
我想我可以在有人单击激活模式的链接时预取页面，然后在模式中显示获取的内容：https://github.com/zeit/next.js/tree/master/examples/with-prefetching
【问题讨论】：
标签： javascript reactjs next.js
我不认为 producthunt 上的产品模式是服务器渲染的。当您单击产品时，它会打开模式，然后加载数据客户端。除此操作外，还使用 history 更新 URL。现在，如果您刷新页面，它将呈现不同的视图。您可以通过next 以类似的方式拥有两个不同的视图来实现这一点。例如，您可以在pages 目录中创建两个页面，例如：
pages
|- homepage.js
|- product.js
然后在您的服务器配置中，您可以将从/product 开始的所有请求路由到呈现product.js。模态逻辑可以保留在homepage.js 中，您可以在单击产品时呈现适当的模态。您还可以在打开模式时将 url 推送到历史记录。
现在，如果页面被刷新或新的浏览器选项卡/窗口打开时使用相同的 url，它将要求服务器呈现 product.js。
【讨论】：
https://www.producthunt.com/frontend/graphql api 发送了一个新请求。我正在使用 Firefox 开发工具。不知道为什么它没有出现在您的浏览器上。您能否检查一下您是否在“所有”请求选项卡中？