/** * Copyright 2020, Verizon Media * Licensed under the terms of the MIT license. See LICENSE file in project root for terms. */ import React, { useEffect } from 'react'; import { HashRouter, Route, Redirect } from 'react-router-dom'; import ReactDOM from 'react-dom'; import { createGenerateClassName, StylesProvider } from '@material-ui/styles'; import Styled from './components/StyledComponents'; import Demos from './components/Demos'; // StylesProvider + generateClassName fix isuue of css trubles when using material ui + styled components // show wrap this solution above the root app const generateClassName = createGenerateClassName({ productionPrefix: 'jafar-react-layout-demos', }); const deafultDemoRoute = '/overview/introduction'; const Root = () => { useEffect(() => { const unsubscribeHashChange = window.addEventListener('hashchange', () => { window.parent.postMessage(location.hash, '*'); // eslint-disable-line }); return () => unsubscribeHashChange && unsubscribeHashChange(); }, []); return (<HashRouter basename="/"> <StylesProvider generateClassName={generateClassName}> <Styled.RootElement id="jafar-react-layout-demos"> <Styled.GlobalStyle /> <Styled.Header> <Styled.InternalLink id="logo" to={deafultDemoRoute}> <Styled.Logo src={require('./jafar.svg')} /> <Styled.LogoText>Jafar | React Layout Demos</Styled.LogoText> </Styled.InternalLink> <Styled.HeaderLinks> <Styled.ExternalLink href={process.env.REACT_APP_JAFAR_DOCS}>Docs</Styled.ExternalLink> <Styled.ExternalLink href={process.env.REACT_APP_JAFAR_GIT}>GitHub</Styled.ExternalLink> </Styled.HeaderLinks> </Styled.Header> <Route exact={true} path="/" render={shouldRedirect} /> <Route path="/:levelA/:levelB" render={props => (<Styled.Wrapper id="demos"><Demos match={props.match} /></Styled.Wrapper>)} /> {shouldRedirect()} </Styled.RootElement> </StylesProvider> </HashRouter>); }; const shouldRedirect = () => { const paths = location && location.hash && location.hash.split('/'); //eslint-disable-line if (paths && paths[0] !== '' && paths.length === 2) { return (<Redirect to={deafultDemoRoute} />); } return null; }; if (document.getElementById('root')) { ReactDOM.render(<Root />, document.getElementById('root')); // hot reload if (module.hot) { module.hot.accept(); } } export default Root;