0.1.3 • Published 3 years ago
@gk-lab/routerenderer v0.1.3
@gk-lab/routerenderer
Takes a set of {url: node} and creates a list of Routes
import React from 'react'
import styled from 'styled-components'
import { useHistory } from 'react-router'
import GlobalStyle from './GlobalStyle'
import RouteRenderer from './RouteRenderer/RouteRenderer'
const StyledApp = styled.main`
position: relative;
width: 100vw;
height: 100vh;
margin: 0 auto;
display: flex;
flex-direction: row;
overflow: hidden;
`
const StyledSection = styled.div`
min-height: 100vh;
width: 100%;
`
const StyledFooter = styled.div`
min-height: 55vh;
width: 100%;
`
const App = () => {
const history = useHistory()
const onClose = () => {
history.goBack()
}
const pages = {
'home': <StyledSection>Section Home</StyledSection>,
'page1': <StyledSection>Section Page1</StyledSection>,
'page2': <StyledSection>Section Page2</StyledSection>,
'page3': <StyledSection>Section Page3</StyledSection>,
'page3/subpage1': <StyledSection>Section Page3 / Subpage1</StyledSection>,
'footer': <StyledFooter>Section Footer</StyledFooter>,
}
return (
<StyledApp>
<GlobalStyle />
<nav>
{Object.keys(pages).map(path => {
return <a key={path} href={path}>{path}</a>
})}
</nav>
<RouteRenderer
id='route-wrapper'
pages={pages}
onClose={onClose}
/>
</StyledApp>
)
}