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)