I have a react CookieBanner component in the app /src and I would like to render this component in an HTML page placed in the Public folder. The component is working with the normal App.js and it rendered, I would like to have the same component in static HTML pages in the Public folder.
Here are my routes.js
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; CookieBanner.js
import ReactDOM from "react-dom"; import React from "react"; import CookieConsent from "react-cookie-consent"; class CookieBanner extends React.Component { constructor(props) { super(props); this.state = { showCookie: false, }; } componentDidMount() { setTimeout(function () { //Start the timer this.setState({showCookie: true}) //After 1 second, set render to true }.bind(this), 800) } render() { return ( <div> { this.state.showCookie && ( <CookieConsent // debug={true} location='bottom' buttonText='Akzeptieren' declineButtonText='Ablehnen' enableDeclineButton flipButtons={true} cookieName='<cookieName>' style={{background: "rgb(170, 165, 163)", padding: '0.2rem'}} overlayStyle={{zIndex: '9999'}} buttonStyle={{ color: 'rgb(255, 255, 255)', fontSize: '16px', backgroundColor: 'rgb(112, 173, 71)' }} declineButtonStyle={{color: 'rgb(192, 0, 0)', borderColor: 'transparent', backgroundColor: 'none', border: 'none', background:'transparent'}} expires={150} overlay> {/*// onAccept={() => {*/} {/*// alert("Accept was triggered by clicking the Accept button");*/} {/*// }}*/} {/*// onDecline={() => {*/} {/*// alert("nay!");*/} {/*// }}*/} this is a cookie <span style={{fontSize: '16px'}}> <a style={{display: 'inline-block', padding: '0.2rem', textDecoration: 'underline'}} role="button" href="/datenSchutz">More information</a> </span> </CookieConsent>) } </div> ); } } ReactDOM.render(<CookieBanner />, document.getElementById("banner")); 
Top comments (0)