react项目报红色警告 UNSAFE componentWillMount in strict mode is not recommended

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See react-unsafe-component-lifecycles for details. * Move code with side effects to componentDidMount, and set initial state in the constructor. Please update the following components: SideEffect(NullComponent)

home.js

import React from 'react';
import {Helmet} from 'react-helmet';

export default class Index extends React.PureComponent {
    render() {
        return (
            <div>
                <Helmet>
                    <title>404</title>
                </Helmet>
                <div className="warnging">404</div>
            </div>
        );
    }
}

原因：
项目中使用了react大于16.9的版本。
而 import { Helmet } from 'react-helmet';版本太低了。

解决方案：更换成：eact-helmet-async

home.js

import React from 'react';
import {Helmet} from 'react-helmet-async';

export default class Index extends React.PureComponent {
    render() {
        return (
            <div>
                <Helmet>
                    <title>home</title>
                </Helmet>
                <div>home</div>
            </div>
        );
    }
}

App.js 添加 HelmetProvider

import {HelmetProvider} from "react-helmet-async";
....

<HelmetProvider>
    <Suspense fallback={null}>
        <BrowserRouter>
            <Switch>
                {router.map(nav => (
                    <Route
                        exact={!!nav.exact}
                        key={nav.url || nav.title}
                        path={`${nav.url}`}
                        component={nav.component}
                    />
                ))}
            </Switch>
        </BrowserRouter>
    </Suspense>
</HelmetProvider>

参考：https://stackoverflow.com/questions/66045965/warning-using-unsafe-componentwillmount-in-strict-mode-is-not-recommended-upgr