chore: react-helmet => react-helmet-async

fix SideEffect(NullComponent) warning

https://github.com/readium/readium-desktop/issues/596
https://github.com/nfl/react-helmet/issues/465
https://github.com/nfl/react-helmet/issues/426

docs/react/recommendation.en-US.md

@@ -17,7 +17,7 @@ title: Third-Party Libraries
 | Color Picker | [rc-color-picker](https://github.com/react-component/color-picker) [react-color](http://casesandberg.github.io/react-color/) |
 | Media Query | [react-responsive](https://github.com/contra/react-responsive) [react-media](https://github.com/ReactTraining/react-media) |
 | Copy to clipboard | [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard) |
-| Document head manager | [react-helmet](https://github.com/nfl/react-helmet) [react-document-title](https://github.com/gaearon/react-document-title) |
+| Document head manager | [react-helmet](https://github.com/nfl/react-helmet) [react-helmet-async](https://github.com/staylor/react-helmet-async) |
 | Icons | [react-fa](https://github.com/andreypopp/react-fa) [react-icons](https://github.com/gorangajic/react-icons) |
 | QR Code | [qrcode.react](https://github.com/zpao/qrcode.react) |
 | Visual Graph Editor | [GGEditor](https://github.com/gaoli/GGEditor) |

docs/react/recommendation.zh-CN.md

@@ -17,7 +17,7 @@ title: 社区精选组件
 | 拾色器 | [rc-color-picker](https://github.com/react-component/color-picker) [react-color](http://casesandberg.github.io/react-color/) |
 | 响应式 | [react-responsive](https://github.com/contra/react-responsive) [react-media](https://github.com/ReactTraining/react-media) |
 | 复制到剪贴板 | [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard) |
-| 页面 meta 属性 | [react-helmet](https://github.com/nfl/react-helmet) [react-document-title](https://github.com/gaearon/react-document-title) |
+| 页面 meta 属性 | [react-helmet](https://github.com/nfl/react-helmet) [react-helmet-async](https://github.com/staylor/react-helmet-async) |
 | 图标 | [react-fa](https://github.com/andreypopp/react-fa) [react-icons](https://github.com/gorangajic/react-icons) |
 | 二维码 | [qrcode.react](https://github.com/zpao/qrcode.react) |
 | 可视化图编辑器 | [GGEditor](https://github.com/gaoli/GGEditor) |

package.json

@@ -218,7 +218,7 @@
     "react-dnd-html5-backend": "^9.0.0",
     "react-dom": "^16.5.2",
     "react-github-button": "^0.1.11",
-    "react-helmet": "^6.0.0-beta",
+    "react-helmet-async": "^1.0.4",
     "react-highlight-words": "^0.16.0",
     "react-infinite-scroller": "^1.2.4",
     "react-intl": "^3.1.1",

site/theme/template/Content/Article.jsx

@@ -1,6 +1,6 @@
 import React, { Children, cloneElement } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { getChildren } from 'jsonml.js/lib/utils';
 import { Timeline, Alert, Affix } from 'antd';
 import EditButton from './EditButton';

site/theme/template/Content/ComponentDoc.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import { Row, Col, Icon, Affix, Tooltip } from 'antd';

site/theme/template/Home/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { injectIntl } from 'react-intl';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import PropTypes from 'prop-types';
 import Banner from './Banner';
 import Page1 from './Page1';

site/theme/template/Layout/index.jsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { enquireScreen } from 'enquire-js';
 import { IntlProvider } from 'react-intl';
-import { Helmet } from 'react-helmet';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
 import 'moment/locale/zh-cn';
 import { ConfigProvider } from 'antd';
 import LogRocket from 'logrocket';
@@ -119,7 +119,7 @@ export default class Layout extends React.Component {
         ? '基于 Ant Design 设计体系的 React UI 组件库，用于研发企业级中后台产品。'
         : 'An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises';
     return (
-      <>
+      <HelmetProvider>
         <Helmet encodeSpecialCharacters={false}>
           <html lang={appLocale.locale === 'zh-CN' ? 'zh' : 'en'} />
           <title>{title}</title>
@@ -144,7 +144,7 @@ export default class Layout extends React.Component {
             </div>
           </ConfigProvider>
         </IntlProvider>
-      </>
+      </HelmetProvider>
     );
   }
 }