Javascript react cookie同意在公用文件夹中的html页面上不起作用

我正在使用

react cookies approvement

显示cookies，在我出于SEO原因需要将HTML页面添加到公用文件夹之前，它在每个组件上都可以正常工作，现在cookies approvement将不会显示在这些页面上。任何关于我应该如何处理这个问题的建议

import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-snapshot';
import {BrowserRouter as Router} from 'react-router-dom';
import Routes from "./routes";

import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import CookieBanner from "./CookieBanner";
import * as serviceWorker from './serviceWorker';
import C5 from "./images/konfigurator/C5.webp";
import HelmetMetaData from "./HelmetMetaData";


render(
      <React.StrictMode>
          <Router>
              <CookieBanner />
                <Routes />
              {/*<App />*/}
          </Router>
      </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();


class Routes extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
            <HelmetMetaData />
            <Switch>
                <Route exact path="/" render={() => {window.location.href="Home.html"}} />
                <Route path="/Main" component={App}/>
                <Route path="/About" render={() => {window.location.href="About.html"}}/>
                <Route path="/impressum" render={() => {window.location.href="impressum.html"}}/>
                <Route path="/blog" render={() => {window.location.href="blog.html"}}/>
                <Route path="/Questions" render={() => {window.location.href="Questions.html"}} />
                <Route path="/Answers" render={() => {window.location.href="Answers.html"}} />
                <Route path="/info" render={() => {window.location.href="info.html"}} />
                <Route component={Error}/>
            </Switch>
            </div>
        );
    }
};
export default Routes;

从“React”导入React；
从“react dom”导入react dom；
从“反应快照”导入{render}；
从“react Router dom”导入{BrowserRouter as Router}；
从“/Routes”导入路由；
从“./App”导入应用程序；
导入'bootstrap/dist/css/bootstrap.css'；
导入“./index.css”；
从“/CookieBanner”导入CookieBanner；
将*作为serviceWorker从“/serviceWorker”导入；
从“/images/konfigurator/C5.webp”导入C5；
从“/HelmetMetaData”导入头盔元数据；
渲染(
{/*
您基本上是在谈论一个混合域。一个SPA（您的React应用程序）和一些非SPA HTML页面

要实现这一点，您必须在两种情况下都运行React，这是您在上一张图片中尝试过的

我建议您放弃“HTML”页面路径，因为它很难维护。相反，您可以使用创建这些静态页面。您甚至可以重用现有React代码库和基于React的Gatsby部件之间的组件

默认情况下，使用静态HTML页面不会改善SEO。如果您遇到性能问题，您应该查看服务器端渲染或静态站点生成（如Gatsby）
您基本上是在谈论混合域。一个SPA（您的React应用程序）和一些非SPA HTML页面

要实现这一点，您必须在两种情况下都运行React，这是您在上一张图片中尝试过的

我建议您放弃“HTML”页面路径，因为它很难维护。相反，您可以使用创建这些静态页面。您甚至可以重用现有React代码库和基于React的Gatsby部件之间的组件

默认情况下，使用静态HTML页面不会改善SEO。如果遇到性能问题，您应该查看服务器端呈现或静态站点生成（如Gatsby）

<script src="https://unpkg.com/react@16.13.1/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js" crossorigin></script>
<!--<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>-->
<script type="text/jsx">
    var NewComponent = React.createClass({
        render : function (){
            return (
                <h1>New year welcoming</h1>
            )
        }
    })
    ReactDOM.render(<NewComponent />, document.getElementById('banner'));
</script>

</body>