Reactjs 在客户端和服务器端呈现不同的组件

我目前正在开发一个网站，在那里我使用了react、react路由器和redux。我们正在进行服务器端渲染，并在服务器上使用react路由器。现在我有一个例子，我希望客户端呈现不同于服务器端的组件。我想要这样

客户端

<Route path="welcome/:id" component={Home} />

服务器端

<Route path="welcome/:id" component={App} />

---

我有一个用例，比如当用户点击一个图片时，我想打开一个包含内容和推荐图片的模式。当用户点击推荐图片时，相同的模式应该会填写详细信息，我也想更改路线。当在新窗口中打开相同的路径时，应该会为facebook和google打开一个html页面，从中删除元标记

所以要么在客户端和服务器上呈现不同的组件。但这也有一个问题，因为当服务器为呈现的页面提供服务时，我需要找到一种关闭客户端路由器的方法

---

或者在客户端生成一个伪路由更改，该更改会更改url，但不会呈现组件。

检查

窗口是否存在，并有条件地设置要使用的组件，如下所示：

let Handler;

if (typeof window !== 'undefined') {
  Handler = Home;
} else {
  Handler = App;
}

return <Route path="welcome/:id" component={Handler} />

let处理器；
如果（窗口类型！==“未定义”）{
Handler=Home；
}否则{
Handler=App；
}
返回

我心中的麻烦制造者想知道你为什么这么做：）
检查process.env.Browser

let Handler;

if (process.env.browser) {
  Handler = Home;
} else {
  Handler = App;
}

return <Route path="welcome/:id" component={Handler} />

let处理器；
if（process.env.browser）{
Handler=Home；
}否则{
Handler=App；
}
返回
我有一个用例，比如当用户单击图像时，我想打开一个包含内容的模式并推荐图像。当用户点击推荐图片时，相同的模式应该会填写详细信息，我也想更改路线。当在新窗口中打开相同的路由时，应该会为facebook和google打开一个html页面，以便从中删除元标记。但我不认为这会有用，因为每次服务器呈现页面时，客户端都会再次在react router中检查路由，它将呈现模式而不是html页面。哦，我明白了。是的，那就不确定了，这听起来很奇怪。如果用户刷新了页面，会发生什么？他们会看到完全不同的东西吗？如果用户刷新了页面，他们会在html页面中看到相同的内容，而没有模式。所以我可能希望在客户端进行类似伪路由更改的操作。这个解决方案不起作用。请阅读用例。当服务器发送呈现页面时，客户端再次检查url和呈现的客户端组件。因此，始终呈现客户端组件。我需要一种绕过客户端反应路由器的方法，如果服务器正在为页面提供服务，那么这个解决方案才能工作。嘿@Priyank Bhatt，你找到一种方法来完成这个吗？是的，我得到了解决方案，但它主要是一个黑客。所以我所做的是。我从window.initial\u状态中删除所有内容，只要它们的内容在其中。通过使用react router getComponent，我检查window.initial_uu状态是否为空，如果为空，则从客户端触发路由，以便呈现该组件。若窗口初始状态不为空，则渲染其他组件<代码>函数onUpdate（）{if（window.\uu INITIAL\u STATE\uuuu！==null）{window.\uu INITIAL\u STATE\uuuuuu=null；return；}