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} />

我的麻烦制造者想知道你为什么这样做：）

Answer 2

检查process.env.Browser

let Handler;

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

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

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

2 个答案: