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

Question

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

客户端

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

服务器端

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

我有一个用例,例如当用户点击图像时,我想打开包含内容的模态并推荐图像.当用户点击推荐图像时,同一模态应该填写细节,我也想改变路线.在新窗口中打开时,相同的路线应该打开Facebook的一个html页面,并从谷歌中删除元标记.

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

或者在客户端生成伪路由更改,该更改会更改URL但不会呈现组件.

Answer 1

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

let Handler;

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

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

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