Just some code

import { Link } from 'react-router-dom';
import { Route, useParams } from 'react-router-dom'
import Navbar, { NavItem } from '../components/navbar'

export const getImage = async ( url ) => {
  let cache = await caches.open( 'ImageCache-v0.0.1' );
  let cacheResponce = await cache.match( url );

  if (
    cacheResponce &&
    cacheResponce.status < 400 &&
    cacheResponce.headers.has( 'content-type' ) &&
    cacheResponce.headers.get('content-type').match(/^image\//i)
  ) {
    console.log( 'Using cached responce:', cacheResponce )
  } else {
    cacheResponce = await fetch( url );
    if ( ! cacheResponce.ok ) {
      throw new TypeError('Bad response status.');
    }
    await cache.put( url, cacheResponce.clone() );
    console.log( 'Caching responce:', cacheResponce )
  }
  return cacheResponce.blob();
}

export const Pages = props => {
  const pages = props.pages

  // const [ navItems, setNavItems ] = useState( [] )

  return (
    <main className='content ' >
      <Navbar className='main' items={ pages } />
      <header>HEADER</header>

      {
        pages.map( ( { path, component: Component, initPrams } ) => (
          <Route exact
            path = { path }
            render = { props =>
              <Component { ...props } items={ initPrams } />
            }
          />
        ) )
      }

      <footer>FOOTER</footer>
    </main>
  );
}
export default Pages;