@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>
  )
}