React Starter Kit 和 Material UI:应在 muiTheme 上下文中提供 userAgent 以进行服务器端渲染

2024-02-01

随着反应入门套件 https://github.com/kriasoft/react-starter-kit, I add 材质用户界面 http://www.material-ui.com/#/如下:

npm install material-ui --save

并将以下内容导入到组件中:

import RaisedButton from 'material-ui/lib/raised-button';

and:

<RaisedButton label="Default" />

我收到以下错误:

警告:Material-UI:应在 muiTheme 上下文中提供 userAgent 以进行服务器端渲染。

根据 Material UI 的文档 http://www.material-ui.com/#/get-started/server-rendering,它说我需要解决三件事:

  1. 自动前缀器和用户代理
  2. 进程.env.NODE_ENV

我应该输入什么代码以及具体位置,特别是使用 React Starter Kit?

P.S. 这个解决方案 https://github.com/kriasoft/react-starter-kit/pull/414对我不起作用:-/


当使用Material-UI进行服务器渲染时,我们必须为服务器和客户端使用相同的环境。这有两个技术含义。

正如你所看到的材质 UI 文档 https://github.com/callemall/material-ui/blob/599a5327a015147699e6ef742b1939426b6b8d0b/docs/src/app/components/pages/get-started/serverRendering.md page

您需要为服务器和浏览器上下文提供相同的用户代理,就像您在文档中看到的那样,但是,我强烈建议您提供“所有”用户代理,因为您将提供大量不必要的代码-用户。

相反,您可以轻松地遵循 MaterialUI 文档并传递包含在中的用户代理值http请求头.

With an 快递或 koa server

global.navigator = global.navigator || {};
global.navigator.userAgent = req.headers['user-agent'] || 'all';

我刚刚检查过它已被添加到ReactStarterKit中 https://github.com/kriasoft/react-starter-kit/blob/master/src/server.js#L31(我自己没有测试过)src/server.js

global.navigator = global.navigator || {};
global.navigator.userAgent = global.navigator.userAgent || 'all';
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Starter Kit 和 Material UI:应在 muiTheme 上下文中提供 userAgent 以进行服务器端渲染 的相关文章

随机推荐