fix: <Outlet/> and index path support

* add: example with Outlet and index routes

Author: nichita-pasecinic

example/routes.tsx

@@ -1,5 +1,5 @@
 import { IRoutesConfig, useCheckRole } from '../.';
-import { Navigate, useParams } from 'react-router-dom';
+import { Navigate, useParams, Outlet } from 'react-router-dom';
 
 export const roles = {
   ADMIN: 'ADMIN',
@@ -41,27 +41,63 @@ export const routes: IRoutesConfig = {
     },
   ],
   private: [
+    {
+      path: '/outlet',
+      component: (
+        <>
+          <h1>outlet path (this must be visible)</h1>
+          <Outlet />
+        </>
+      ),
+      children: [
+        {
+          index: true,
+          component: <h1>index path</h1>,
+        },
+        {
+          path: 'more',
+          component: <h1>more</h1>,
+        },
+        {
+          path: 'less',
+          component: <h1>less</h1>,
+        },
+      ],
+    },
     {
       path: '/home',
       component: <h1>Home Page</h1>,
     },
     {
       path: '/private',
-      component: <h1>Private Page</h1>,
+      component: (
+        <>
+          <span>some private layout</span>
+          <Outlet />
+        </>
+      ),
       children: [
+        {
+          index: true,
+          component: <h1>Private Page</h1>,
+        },
         {
           path: 'create',
-          component: <h1>nested private /create</h1>
+          component: <h1>nested private /create</h1>,
         },
         {
           path: ':id',
-          component: <NestedPrivatePage />,
+          component: <Outlet/>,
           children: [
+            {
+              index: true,
+              component: <NestedPrivatePage />
+            },
             {
               path: 'update',
-              component: <h1>nested private /:id/update</h1>
-            }
-          ]
+              component: <h1>nested private /:id/update</h1>,
+            },
+          ],
         },
       ],
     },

example/src/App.tsx

@@ -82,6 +82,19 @@ const App = () => {
           </Link>
         </li>
       </ul>
+      <br/>
+      with outlet:
+      <ul>
+        <li>
+          <Link to={'/outlet'}>/outlet</Link>
+        </li>
+        <li>
+          <Link to={'/outlet/more'}>/outlet/more</Link>
+        </li>
+        <li>
+          <Link to={'/outlet/less'}>/outlet/less</Link>
+        </li>
+      </ul>
       <fieldset style={{minHeight: 100}}>
         <legend>pages wrapper</legend>
         <Routes />

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.2",
+  "version": "0.4.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

readme.md

@@ -68,16 +68,30 @@ export const routes: IRoutesConfig = {
     // nested routes example
     {
       path: '/posts',
-      component: <h1>Posts Lists</h1>,
+      component: <>
+        <h1>Posts Lists Layout</h1>
+        <Outlet/> {/* render outlet (the matched paths) */}
+      </>,
       children: [
+        {
+          index: true,
+          component: <h1>a list of posts here...</h1>
+        },
         {
           path: 'create',
           component: <h1>create new post</h1>
     	},
         {
           path: ':id',
-          component: <h1>Single post</h1>,
+          component: <>
+            Single post page layout
+            <Outlet/>
+          </>,
           children: [
+            {
+              index: true,
+              component: <h1>post details</h1>
+            },
             {
               path: 'update',
               component: <h1>update post with dynamic :id</h1>
@@ -243,6 +257,9 @@ export interface IRoute {
 
   /** the component to be rendered under the path */
   component: React.ReactElement;
+    
+  /** if this is a route definition for index path */
+  index?: boolean;
 
   /** used for nested (aka children) routes definition */
   children?: IRoute[];

src/Routes.tsx

@@ -21,14 +21,18 @@ const createNestedRoutes = (
         }
         if (route.children) {
           return (
-            <Route key={i} path={route.path}>
-              <Route index={true} element={<RouteType {...route} />} />
+            <Route key={i} path={route.path} element={<RouteType {...route} />}>
               {route.children && createNestedRoutes(route.children, RouteType)}
             </Route>
           );
         }
         return (
-          <Route key={i} path={route.path} element={<RouteType {...route} />} />
+          <Route
+            index={route.index}
+            key={i}
+            path={route.path}
+            element={<RouteType {...route} />}
+          />
         );
       })}
     </>

src/types.ts

@@ -7,6 +7,9 @@ export interface IRoute {
   /** the component to be rendered under the path */
   component: React.ReactElement;
 
+  /** if this is a route definition for index path */
+  index?: boolean;
+
   /** used for nested routes */
   children?: IRoute[];