在客户端和服务器端渲染不同的组件答案

【问题标题】：Render different components on client and server side在客户端和服务器端渲染不同的组件
【发布时间】：2016-11-29 19:14:53
【问题描述】：

我目前正在开发一个使用 react、react-router 和 redux 的网站。我们正在做服务器端渲染并在服务器上使用反应路由器。现在我有一个案例，我希望客户端呈现与服务器端不同的组件。我想要这样的。

客户端

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

服务器端

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

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

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

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

【问题讨论】：

嘿@Priyank Bhatt，您找到解决此问题的方法了吗？
是的，我得到了解决方案，但它主要是一个 hack。所以我所做的是。只要它们是其中的内容，我就会从 window.intial__state 中删除所有内容。通过使用 react-router getComponent 我检查了 window.intial__state 是否为空，如果是，则从客户端触发路由，以便渲染该组件。如果 window__initialstate 不为空，则渲染其他组件。
```
 function onUpdate() { if (window.__INITIAL_STATE__ !== null) { window.__INITIAL_STATE__ = null;返回; } }
```
function onUpdate() { if (window.__INITIAL_STATE__ !== null) { window.__INITIAL_STATE__ = null; return; } }
<Router history={history} onUpdate={onUpdate}>

标签： reactjs redux react-router

【解决方案1】：

检查window 是否存在并有条件地设置您要使用的组件，如下所示：

let Handler;

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

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

我内心的麻烦制造者想知道你为什么这样做:)

【讨论】：

我有一个用例，比如当用户单击图像时，我想打开一个包含内容的模式并推荐图像。当用户单击推荐图像时，相同的模式应该填写详细信息，我也想更改路线。在新窗口中打开相同的路线时，应该会打开一个 html 页面，供 facebook 和 google 从中删除元标记。
但我不认为这会有用，因为每次为服务器渲染页面提供服务时，客户端都会再次检查反应路由器中的路由，它将呈现模式而不是 html 页面。
哦，我明白了。是的，那时不确定，听起来像是一种奇怪的方式。如果用户刷新页面会发生什么？他们会看到完全不同的东西吗？也许在问题中概述所需的行为。
是的，如果用户刷新页面，他们会在 html 页面中看到没有模态的相同内容。所以可能我想要在客户端进行伪路由更改。

【解决方案2】：

检查 process.env.Browser

let Handler;

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

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

【讨论】：

此解决方案不起作用。请阅读用例。当服务器发送渲染页面时，客户端反应路由器再次检查 url 和渲染的客户端组件。所以总是会呈现客户端组件。如果服务器只为页面提供服务，我需要一种绕过客户端反应路由器的方法，然后这个解决方案才能工作。