handle 404 pages and 500 pages with nesting layout

Author: dev-muhammad-adel

LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-filebased",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

react-router-filebased-1.0.1.tgz

@@ -1,14 +1,11 @@
 import React from 'react'
-import { RouteObject, RouterProvider, createBrowserRouter } from 'react-router-dom'
+import { RouterProvider, createBrowserRouter } from 'react-router-dom'
 import collectedRoutes from '../../utils/routesCollector'
 
-const router = createBrowserRouter(collectedRoutes as RouteObject[])
-
+const routes = collectedRoutes()
+const router = createBrowserRouter(routes)
 const FileBasedProvider = () => {
   return <RouterProvider router={router} />
 }
 
-// const domNode = document.getElementById('root');
-// const root = createRoot(domNode);
-// root.render(<FileBasedProvider/>)
 export default FileBasedProvider

src/components/Provider/index.tsx

@@ -7,132 +7,80 @@ type RouteConfig = {
   element: ReactElement<any, string | JSXElementConstructor<any>>
 }
 
-type LayoutMetaData = {
-  [key: string]: ReactNode
+type LayoutRoutes = {
+  [key: string]: { el: ReactNode; pathLength: number }
 }
 
-type NotFoundMetaData = {
-  [key: string]: ReactNode
+type NotFoundRoutes = {
+  [key: string]: { el: ReactNode; pathLength: number }
 }
-type ErrorMetaData = {
-  [key: string]: ReactNode
+type ErrorRoutes = {
+  [key: string]: { el: ReactNode; pathLength: number }
 }
-
-type NestedRoute = {
-  errorElement?: ReactNode
-  path: string
-  key: string
-  element: ReactNode | null
-  children?: NestedRoute[]
-  index?: boolean
-}
-
-function getRoutes(r: any): RouteConfig[] {
-  // console.log(r.keys(), 'routes')
+const getRoutes = (r: any): RouteConfig[] => {
   return r.keys().map((route: string) => {
     const path = route
       .substr(1)
       .replace(/\/src\/pages|index|\.(js|jsx|ts|tsx)$/g, '')
       .replace(/\[\.{3}.+\]/, '*')
       .replace(/\[(.+)\]/, ':$1')
-    console.log({ React })
+
     const Element = React.lazy(() => r(route))
 
-    return {
-      path,
-      element: <Element />,
-    }
+    return { path, element: <Element /> }
   })
 }
 
-function getMetaData(key: string, routes: RouteConfig[]): LayoutMetaData | NotFoundMetaData {
-  const data: LayoutMetaData | NotFoundMetaData = {}
-  // debugger
+function getMetaData(key: string, routes: RouteConfig[]): LayoutRoutes | NotFoundRoutes {
+  const data: LayoutRoutes | NotFoundRoutes = {}
 
   routes
     .filter((route) => route.path.includes(key))
     .forEach((route) => {
       const splitied = route.path.split('/')
       const indexoF = splitied.indexOf(key)
-      if (key === 'layout') {
-        const newElement = cloneElement(route.element, {
-          children: <Outlet />,
-        })
-        data[splitied[indexoF - 1]] = newElement
-      } else {
-        data[splitied[indexoF - 1]] = route.element
+      const newElement = key === 'layout' ? cloneElement(route.element, { children: <Outlet /> }) : route.element
+
+      data[splitied[indexoF - 1]] = {
+        el: newElement,
+        pathLength: splitied.length,
       }
     })
+
   return data
 }
 
-const filterRoutes = (route: RouteConfig): boolean => !route.path.includes('layout') && !route.path.includes('layout')
-function nestedRoutes(routes: RouteConfig[]): NestedRoute[] {
-  const layoutMetaData = getMetaData('layout', routes) as LayoutMetaData
-  const errorMetaData = getMetaData('500', routes) as ErrorMetaData
-  const notFoundMetaData = getMetaData('404', routes) as NotFoundMetaData
-  const routesWithoutinfoPages = routes.filter(filterRoutes)
-  const nested: NestedRoute[] | null = []
-  routesWithoutinfoPages.forEach((route) => {
-    console.log('2', route)
-
+function nestedRoutes(mainRoutes: RouteConfig[], layoutRoutes: LayoutRoutes, errorRoutes: ErrorRoutes): RouteObject[] {
+  const Loading = (
+    <div className='h-screen w-full flex place-items-center  justify-center'>
+      <Loader />
+    </div>
+  )
+  const nested: RouteObject[] | null = []
+  mainRoutes.forEach((route) => {
     let currentNode = nested
     const splittedPath = route.path.split('/')
     splittedPath.forEach((part, i) => {
-      let childNode = currentNode?.find((node) => node.path === part)
+      const isLastCild = i === splittedPath.length - 1
 
+      let childNode = currentNode?.find((node) => node.path === part)
       if (!childNode) {
         childNode = {
-          key: part,
           path: part === '404' ? '*' : part,
-          element:
-            i === splittedPath.length - 1 ? (
-              <React.Suspense
-                fallback={
-                  <div className='h-screen w-full flex place-items-center  justify-center'>
-                    {' '}
-                    <Loader />{' '}
-                  </div>
-                }
-              >
-                {' '}
-                {route.element}
-              </React.Suspense>
-            ) : layoutMetaData[part] ? (
-              <React.Suspense
-                fallback={
-                  <div className='h-screen w-full flex place-items-center  justify-center'>
-                    {' '}
-                    <Loader />{' '}
-                  </div>
-                }
-              >
-                {layoutMetaData[part]}
-              </React.Suspense>
-            ) : (
-              ''
-            ),
-          children: i === splittedPath.length - 1 ? undefined : [],
-        }
-
-        if (notFoundMetaData[part]) {
-          // childNode.errorElement = notFoundMetaData[part];
-          if (!childNode.element) {
-            childNode.element = notFoundMetaData[part]
-          }
-        }
-
-        if (errorMetaData[part]) {
-          childNode.errorElement = errorMetaData[part]
-        }
-
-        if (part === '' && i !== 0) {
-          childNode.index = true
-          // childNode.children=null
-        }
-
-        if (i === 0) nested.push(childNode)
-        else {
+          element: isLastCild ? (
+            <React.Suspense fallback={Loading}>{route.element}</React.Suspense>
+          ) : layoutRoutes[part] ? (
+            <React.Suspense fallback={Loading}>{layoutRoutes[part].el}</React.Suspense>
+          ) : (
+            ''
+          ),
+          children: isLastCild ? undefined : [],
+          errorElement: Object.values(errorRoutes).find((e) => e.pathLength === splittedPath.length)?.el,
+        } as RouteObject
+
+        if (i === 0) {
+          nested.push(childNode)
+        } else {
           currentNode.push(childNode)
         }
       }
@@ -143,13 +91,20 @@ function nestedRoutes(routes: RouteConfig[]): NestedRoute[] {
   })
   return nested
 }
-const requireAll = (require as any).context(
-  './../../../../../src/pages',
-  true,
-  /^\.\/(?!pages\/)[\w\/\[\]\-_]+\.(tsx|jsx)?$/,
-  'lazy',
-)
 
-const paths = getRoutes(requireAll)
-const collectedRoutes = nestedRoutes(paths) as RouteObject[]
-export default collectedRoutes
+export default function collectedRoutes(): RouteObject[] {
+  const requireAll = (require as any).context(
+    './../../../../../src/pages',
+    true,
+    /^\.\/(?!pages\/)[\w\/\[\]\-_]+\.(tsx|jsx)?$/,
+    'lazy',
+  )
+  const routes = getRoutes(requireAll)
+  const layoutRoutes = getMetaData('layout', routes)
+  const errorRoutes = getMetaData('500', routes)
+  const mainRoutes = routes.filter(
+    (route: RouteConfig): boolean => !route.path.includes('layout') && !route.path.includes('500'),
+  )
+
+  return nestedRoutes(mainRoutes, layoutRoutes, errorRoutes) as RouteObject[]
+}