Welcome to react-pwa Discussions!

[suren-atoyan]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded.

[jjkavalam]

Really cool project ! Been looking for a starter template for building PWA apps in React ! Happy with your selection of tools as well. Thank you for putting it out there. I will surely give a try.

[Markkos89]

Hi @suren-atoyan

what a great template !!

[suren-atoyan]

glad you liked it 🙂

[NarekMeliksetyan]

The starter is really awesome but how can I use nested routes?

[Markkos89]

you can implement nested routes following differents patterns, using react-router-dom : example

[NarekMeliksetyan]

I'm using react router and the solution here is really very interesting. I wondered how it would be ib this case

[Joseamica]

Hi, how we can use nested routing?

import AddTaskIcon from '@mui/icons-material/AddTask'
import BugReportIcon from '@mui/icons-material/BugReport'
import GitHubIcon from '@mui/icons-material/GitHub'
import HomeIcon from '@mui/icons-material/Home'
import TerrainIcon from '@mui/icons-material/Terrain'

import asyncComponentLoader from '@/utils/loader'

import { Pages, Routes } from './types'
import VenueId from '@/pages/Venues/venueId'

const routes: Routes = {
  [Pages.Welcome]: {
    component: asyncComponentLoader(() => import('@/pages/Welcome')),
    path: '/',
    title: 'Welcome',
    icon: HomeIcon,
  },
  [Pages.Page1]: {
    component: asyncComponentLoader(() => import('@/pages/Page1')),
    path: '/page-1',
    title: 'Page 1',
    icon: GitHubIcon,
  },
  [Pages.Page2]: {
    component: asyncComponentLoader(() => import('@/pages/Page2')),
    path: '/page-2',
    title: 'Page 2',
    icon: AddTaskIcon,
  },
  [Pages.Page3]: {
    component: asyncComponentLoader(() => import('@/pages/Page3')),
    path: '/page-3',
    title: 'Page 3',
    icon: TerrainIcon,
  },
  [Pages.Page4]: {
    component: asyncComponentLoader(() => import('@/pages/Page4')),
    path: '/page-4',
    title: 'Page 4',
    icon: BugReportIcon,
  },
  [Pages.Venues]: {
    component: asyncComponentLoader(() => import('@/pages/Page4')),
    path: '/venues',
    title: 'Page 4',
    icon: BugReportIcon,
    children: [
      // HOW?!
    ],
  },

  [Pages.NotFound]: {
    component: asyncComponentLoader(() => import('@/pages/NotFound')),
    path: '*',
  },
}

export default routes