javascript - react-cookie-consent 不适用于公用文件夹中的 html 页面

问题描述

我react-cookies-consent用来显示 cookie，并且它在每个组件上都可以正常工作，直到我出于 SEO 原因需要将 HTML 页面添加到公用文件夹中，现在这些页面上不会显示 cookie 同意。关于我应该如何解决这个问题的任何建议。

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;

更新：

我刚刚尝试了在 HTML 页面中呈现组件的可能性，我从一个简单的示例开始，但它不起作用

<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>

是的，我<div id="banner"></div>在<body>

没有错误，因为它只是不渲染

标签： javascriptreactjsfrontendweb-frontend

您基本上是在谈论拥有混合域。一个 SPA（你的 React 应用程序）和一些非 spa 的 HTML 页面。

要完成这项工作，您必须在这两种情况下都运行 React，这是您在上一张图片中尝试过的。

我会推荐前面的“HTML”页面路由，它很难维护。相反，您可以使用Gatsby创建这几个静态页面。您甚至可以在现有的 React 代码库和基于 React 的 Gatsby 部分之间重用组件。

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

javascript - react-cookie-consent 不适用于公用文件夹中的 html 页面

问题描述

解决方案

推荐阅读