Javascript 服务器端在单击NextJS的按钮时在React中呈现模式_Javascript_Reactjs_Next.js

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

javascript reactjs next.js

Javascript 服务器端在单击NextJS的按钮时在React中呈现模式,javascript,reactjs,next.js,Javascript,Reactjs,Next.js,我想在点击一个按钮后，在ReactJS服务器端呈现一个模态。您可以在Product Hunt的网站上看到一个示例：如果您单击某个流行产品，它将打开一个模式，然后该页面将在服务器端作为普通请求呈现我对React不是很在行，但有人能给我指出正确的方向或给出一个代码示例吗我想我可以在有人点击激活模式的链接时预取页面，然后在模式中显示获取的内容：我不认为producthunt上的产品模式是服务器呈现的。当您单击产品时，它会打开模式，然后加载数据客户端。在执行此操作的同时，还可以使用历史记录更新U

我想在点击一个按钮后，在ReactJS服务器端呈现一个模态。您可以在Product Hunt的网站上看到一个示例：

如果您单击某个流行产品，它将打开一个模式，然后该页面将在服务器端作为普通请求呈现

我对React不是很在行，但有人能给我指出正确的方向或给出一个代码示例吗

我想我可以在有人点击激活模式的链接时预取页面，然后在模式中显示获取的内容：

我不认为producthunt上的产品模式是服务器呈现的。当您单击产品时，它会打开模式，然后加载数据客户端。在执行此操作的同时，还可以使用

历史记录

更新URL。现在，如果刷新页面，它将呈现不同的视图。您可以使用

next

以类似的方式使用两个不同的视图来实现这一点。例如，您可以在

pages

目录中创建两个页面，例如：

pages
|- homepage.js
|- product.js

然后，在服务器配置中，您可以将从

/product

开始的所有请求路由到render

product.js

。模态逻辑可以停留在

homepage.js

中，您可以在这里单击产品时呈现适当的模态。您还可以在打开modal时将url推送到历史记录

现在，如果页面被刷新，或者新的浏览器选项卡/窗口以相同的url打开，它会要求服务器呈现

product.js

真的吗？我在浏览器中查看了网络控制台，当我单击某个产品时，没有看到另一个请求弹出。所以我认为它是服务器渲染的。我只是检查了一下，它向

https://www.producthunt.com/frontend/graphql

api。我正在使用firefox开发工具。不知道为什么它没有出现在你的浏览器上。你能检查一下你是否在“所有”请求选项卡上吗？你完全正确。。正在疯狂地弄明白他们在做什么（因为这看起来相当巧妙）。。谢谢