Reactjs 在生产模式下，react-Hellm async不工作，react-Hellm async如何工作？

最近，我开始在react中使用meta标记。经过一些研究，我发现异步是为每个页面设置元标记的最佳库。然而，我想有条件地为几个页面设置元标记

我为两个页面设置了不同的元标记，请看

index.js

ReactDOM.render(
  <React.StrictMode>
    <HelmetProvider>
      <App/>
    </HelmetProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM.render(
,
document.getElementById（'root'））
);

pageOne.jsx

componentDidMount(){
    axios.get('/getTrack/',{params: {id: this.props.match.params.id}})
    .then((res) => this.setState({trackData: res.data, isLoading: false}))
    .catch((err) => console.log(err))
}
render() {
        return (
            this.state.isLoading?
                <div className="page-loader">
                    <Helmet>
                        {/* Page sittings */}
                        <meta charset="utf-8" />
                        <meta name="theme-color" content="#000000" />
                        <meta name="viewport" content="width=device-width, initial-scale=1" />
                        
                        {/* Primary Meta Tags */}
                        <title>Loading...</title>
                    </Helmet>
                </div>
            :
            <div className="main-page">
                <Helmet>
                    {/* Page sittings */}
                    <meta charset="utf-8" />
                    <meta name="theme-color" content="#000000" />
                    <meta name="viewport" content="width=device-width, initial-scale=1" />
                    
                    {/* Primary Meta Tags */}
                    <title>{this.state.trackData.title}</title>
                    <meta name="title" content={this.state.trackData.title}/>
                    <meta name="description" content={this.state.trackData.desc}/>
                    
                    {/* Open Graph / Facebook */}
                    <meta property="og:type" content="website"/>
                    <meta property="og:url" content="https://example.com/"/>
                    <meta property="og:title" content={this.state.trackData.title}/>
                    <meta property="og:description" content={this.state.trackData.desc}/>
                    <meta property="og:image" content="/logo192.png"/>
                    
                    {/* Twitter */}
                    <meta property="twitter:card" content="summary_large_image"/>
                    <meta property="twitter:url" content="https://example.com/"/>
                    <meta property="twitter:title" content={this.state.trackData.title}/>
                    <meta property="twitter:description" content={this.state.trackData.desc}/>
                    <meta property="twitter:image" content="/logo192.png"/>
                </Helmet>
            </div>
         )
    }

componentDidMount（）{
get（'/getTrack/'，{params:{id:this.props.match.params.id}）
.then（（res）=>this.setState（{trackData:res.data，isLoading:false}））
.catch（（err）=>console.log（err））
}
render（）{
返回(
这个州正在加载吗？
{/*页面设置*/}
{/*主元标记*/}
加载。。。
:
{/*页面设置*/}
{/*主元标记*/}
{this.state.trackData.title}
{/*开放图形/Facebook*/}
{/*推特*/}
)
}

pageTwo.jsx

                <Helmet>
                    {/* Primary Meta Tags */}
                    <title>XYZ</title>
                    <meta charset="utf-8" />
                    <meta name="title" content="xyz"/>
                    <meta name="theme-color" content="#000000" />
                    <meta name="viewport" content="width=device-width, initial-scale=1" />
                    <meta name="description" content="xyz"/>
                    {/* Open Graph / Facebook */}
                    <meta property="og:type" content="website"/>
                    <meta property="og:url" content="https://example.com/"/>
                    <meta property="og:title" content="xyz"/>
                    <meta property="og:description" content="xyz"/>
                    <meta property="og:image" content="/logo192.png"/>
                    {/* Twitter */}
                    <meta property="twitter:card" content="summary_large_image"/>
                    <meta property="twitter:url" content="https://example.com/"/>
                    <meta property="twitter:title" content="xzy"/>
                    <meta property="twitter:description" content="xzy"/>
                    <meta property="twitter:image" content="/logo192.png"/>
                </Helmet>

{/*主元标记*/}
XYZ
{/*开放图形/Facebook*/}
{/*推特*/}

“反应”：“^17.0.1”
“异步”：“^1.0.9”

我正在使用django作为后端

它是在开发模式下工作，而不是在生产模式下工作。我的web应用没有任何元标记，我不明白异步是如何工作的

这种元标记是可共享的吗

---

这类工作的替代解决方案是什么？

你能解决这个问题吗？是的，如果你想建立一个市场或社区网站，那么react对你来说是一个坏选择，因为你需要良好的SEO，如果你在服务器端而不是客户端呈现页面，你可以归档良好的SEO。我最终选择了NEXTJS，因为它是为解决这些问题而开发的。