javascript - 单击 NextJS 的按钮时，服务器端在 React 中呈现模式

Question

我想在单击按钮时在 ReactJS 中渲染一个模式。您可以在 Product Hunt 的网站上看到一个示例：

https://www.producthunt.com/

如果您单击其中一个流行产品，它会打开一个模式，然后该页面在服务器端呈现为正常请求。

我对 React 不是很好，但是有人可以指出我正确的方向或显示代码示例吗？

我想我可以在有人单击激活模式的链接时预取页面，然后在模式中显示获取的内容：https ://github.com/zeit/next.js/tree/master/examples/with-预取

标签： javascriptreactjsnext.js

Answer 1

我不认为 producthunt 上的产品模式是服务器渲染的。当您单击产品时，它会打开模式，然后加载数据客户端。除此操作外，还使用history​​. 现在，如果您刷新页面，它将呈现不同的视图。您可以next通过以类似方式拥有两个不同的视图来实现这一点。例如，您可以在pages目录中创建两个页面，例如：

pages
|- homepage.js
|- product.js

然后在您的服务器配置中，您可以将所有请求从开始路由/product到 render product.js。模态逻辑可以保留在homepage.js您单击产品时呈现适当模态的位置。您还可以在打开模式时将 url 推送到历史记录。

现在，如果页面被刷新或新的浏览器选项卡/窗口使用相同的 url 打开，它将要求服务器呈现product.js。