@ktjs/router 0.13.0 → 0.14.1

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { KTHTMLElement } from '@ktjs/core';
+
 /**
  * Guard level that determines which guards to apply during navigation
  * - there are global and route-level guards
@@ -31,8 +33,12 @@ interface RawRouteConfig {
   name?: string;
   /** Optional metadata attached to the route */
   meta?: Record<string, any>;
-  /** Route-level guard executed before entering this route */
-  beforeEnter?: (context: RouteContext) => boolean | void | Promise<boolean | void>;
+  /** Optional component to render */
+  component: () => HTMLElement | Promise<HTMLElement>;
+  /** Route-level guard executed before entering this route. Return false to block, string/object to redirect */
+  beforeEnter?: (
+    context: RouteContext
+  ) => string | NavBaseOptions | boolean | void | Promise<string | NavBaseOptions | boolean | void>;
   /** Route-level hook executed after navigation */
   after?: (context: RouteContext) => void | Promise<void>;
   /** Nested child routes */
@@ -96,8 +102,11 @@ interface RouterConfig {
   /** Array of route definitions */
   routes: RawRouteConfig[];
 
-  /** Global guard executed before each navigation (except silentPush) */
-  beforeEach?: (to: RouteContext, from: RouteContext | null) => boolean | void | Promise<boolean | void>;
+  /** Global guard executed before each navigation (except silentPush). Return false to block, string/object to redirect */
+  beforeEach?: (
+    to: RouteContext,
+    from: RouteContext | null
+  ) => string | NavBaseOptions | boolean | void | Promise<string | NavBaseOptions | boolean | void>;
 
   /** Global hook executed after each navigation */
   afterEach?: (to: RouteContext, from: RouteContext | null) => void | Promise<void>;
@@ -125,6 +134,9 @@ interface Router {
   /** Navigation history */
   history: RouteContext[];
 
+  /** Set the router view container */
+  setRouterView(view: HTMLElement): void;
+
   /** Navigate with guards */
   push(location: string | NavOptions): boolean | Promise<boolean>;
 
@@ -147,10 +159,17 @@ interface RouteMatch {
   result: RouteConfig[];
 }
 
+/**
+ * Create a router view container that automatically renders route components
+ */
+declare function KTRouter({ router }: {
+    router: Router;
+}): KTHTMLElement;
+
 /**
  * Create a new router instance
  */
 declare const createRouter: (config: RouterConfig) => Router;
 
-export { GuardLevel, createRouter };
+export { GuardLevel, KTRouter, createRouter };
 export type { NavOptions, RawRouteConfig, RouteConfig, RouteContext, RouteMatch, Router, RouterConfig };

package/dist/index.iife.js

@@ -150,6 +150,15 @@ var __ktjs_router__ = (function (exports) {
         };
     };
 
+    /**
+     * Create a router view container that automatically renders route components
+     */
+    function KTRouter({ router }) {
+        const view = document.createElement('kt-router-view');
+        router.setRouterView(view);
+        return view;
+    }
+
     /**
      * Create a new router instance
      */
@@ -162,6 +171,7 @@ var __ktjs_router__ = (function (exports) {
         const asyncGuards = config.asyncGuards ?? true;
         // # private values
         const routes = [];
+        let routerView = null;
         /**
          * Normalize routes by adding default guards
          */
@@ -174,6 +184,7 @@ var __ktjs_router__ = (function (exports) {
                 beforeEnter: route.beforeEnter ?? defaultHook,
                 after: route.after ?? defaultHook,
                 children: route.children ? normalize(route.children, path) : [],
+                component: route.component,
             };
             // directly push the normalized route to the list
             // avoid flatten them again
@@ -189,49 +200,75 @@ var __ktjs_router__ = (function (exports) {
         const executeGuardsSync = (to, from, guardLevel) => {
             try {
                 if (guardLevel === 0 /* GuardLevel.None */) {
-                    return true;
+                    return { continue: true };
                 }
                 if (guardLevel & 1 /* GuardLevel.Global */) {
                     const result = beforeEach(to, from);
                     if (result === false) {
-                        return false;
+                        return { continue: false };
+                    }
+                    if (typeof result === 'string') {
+                        return { continue: false, redirectTo: { path: result } };
+                    }
+                    if (result && typeof result === 'object' && !('then' in result)) {
+                        return { continue: false, redirectTo: result };
                     }
                 }
                 if (guardLevel & 2 /* GuardLevel.Route */) {
                     const targetRoute = to.matched[to.matched.length - 1];
                     const result = targetRoute.beforeEnter(to);
                     if (result === false) {
-                        return false;
+                        return { continue: false };
+                    }
+                    if (typeof result === 'string') {
+                        return { continue: false, redirectTo: { path: result } };
+                    }
+                    if (result && typeof result === 'object' && !('then' in result)) {
+                        return { continue: false, redirectTo: result };
                     }
                 }
-                return true;
+                return { continue: true };
             }
             catch (error) {
                 onError(error);
-                return false;
+                return { continue: false };
             }
         };
         const executeGuards = async (to, from, guardLevel) => {
             try {
                 if (guardLevel === 0 /* GuardLevel.None */) {
-                    return true;
+                    return { continue: true };
                 }
                 if (guardLevel & 1 /* GuardLevel.Global */) {
                     const result = await beforeEach(to, from);
                     if (result === false) {
-                        return false;
+                        return { continue: false };
+                    }
+                    if (typeof result === 'string') {
+                        return { continue: false, redirectTo: { path: result } };
+                    }
+                    if (result && typeof result === 'object') {
+                        return { continue: false, redirectTo: result };
                     }
                 }
                 if (guardLevel & 2 /* GuardLevel.Route */) {
                     const targetRoute = to.matched[to.matched.length - 1];
-                    const result = targetRoute.beforeEnter(to);
-                    return result !== false;
+                    const result = await targetRoute.beforeEnter(to);
+                    if (result === false) {
+                        return { continue: false };
+                    }
+                    if (typeof result === 'string') {
+                        return { continue: false, redirectTo: { path: result } };
+                    }
+                    if (result && typeof result === 'object') {
+                        return { continue: false, redirectTo: result };
+                    }
                 }
-                return true;
+                return { continue: true };
             }
             catch (error) {
                 onError(error);
-                return false;
+                return { continue: false };
             }
         };
         const navigatePrepare = (options) => {
@@ -280,15 +317,25 @@ var __ktjs_router__ = (function (exports) {
                 fullPath,
             };
         };
-        const navigateSync = (options) => {
+        const navigateSync = (options, redirectCount = 0) => {
             try {
+                // Prevent infinite redirect loop
+                if (redirectCount > 10) {
+                    onError(new Error('Maximum redirect count exceeded'));
+                    return false;
+                }
                 const prep = navigatePrepare(options);
                 if (!prep) {
                     return false;
                 }
                 const { guardLevel, replace, to, fullPath } = prep;
                 // Execute guards
-                if (!executeGuardsSync(to, current, guardLevel)) {
+                const guardResult = executeGuardsSync(to, current, guardLevel);
+                if (!guardResult.continue) {
+                    // Check if there's a redirect
+                    if (guardResult.redirectTo) {
+                        return navigateSync(guardResult.redirectTo, redirectCount + 1);
+                    }
                     return false;
                 }
                 // Update browser history
@@ -302,6 +349,23 @@ var __ktjs_router__ = (function (exports) {
                 // Update current route
                 current = to;
                 history.push(to);
+                // Render component if routerView exists
+                if (routerView && to.matched.length > 0) {
+                    const route = to.matched[to.matched.length - 1];
+                    if (route.component) {
+                        const element = route.component();
+                        if (element instanceof Promise) {
+                            element.then((el) => {
+                                routerView.innerHTML = '';
+                                routerView.appendChild(el);
+                            });
+                        }
+                        else {
+                            routerView.innerHTML = '';
+                            routerView.appendChild(element);
+                        }
+                    }
+                }
                 // Execute after hooks
                 executeAfterHooksSync(to, history[history.length - 2] ?? null);
                 return true;
@@ -311,15 +375,24 @@ var __ktjs_router__ = (function (exports) {
                 return false;
             }
         };
-        const navigateAsync = async (options) => {
+        const navigateAsync = async (options, redirectCount = 0) => {
             try {
+                // Prevent infinite redirect loop
+                if (redirectCount > 10) {
+                    onError(new Error('Maximum redirect count exceeded'));
+                    return false;
+                }
                 const prep = navigatePrepare(options);
                 if (!prep) {
                     return false;
                 }
                 const { guardLevel, replace, to, fullPath } = prep;
-                const passed = await executeGuards(to, current, guardLevel);
-                if (!passed) {
+                const guardResult = await executeGuards(to, current, guardLevel);
+                if (!guardResult.continue) {
+                    // Check if there's a redirect
+                    if (guardResult.redirectTo) {
+                        return navigateAsync(guardResult.redirectTo, redirectCount + 1);
+                    }
                     return false;
                 }
                 // ---- Guards passed ----
@@ -330,6 +403,17 @@ var __ktjs_router__ = (function (exports) {
                 else {
                     window.history.pushState({ path: to.path }, '', url);
                 }
+                current = to;
+                history.push(to);
+                // Render component if routerView exists
+                if (routerView && to.matched.length > 0) {
+                    const route = to.matched[to.matched.length - 1];
+                    if (route.component) {
+                        const element = await route.component();
+                        routerView.innerHTML = '';
+                        routerView.appendChild(element);
+                    }
+                }
                 executeAfterHooks(to, history[history.length - 2] ?? null);
                 return true;
             }
@@ -378,6 +462,9 @@ var __ktjs_router__ = (function (exports) {
             get history() {
                 return history.concat();
             },
+            setRouterView(view) {
+                routerView = view;
+            },
             push(location) {
                 const options = normalizeLocation(location);
                 return navigate(options);
@@ -399,6 +486,7 @@ var __ktjs_router__ = (function (exports) {
         };
     };
 
+    exports.KTRouter = KTRouter;
     exports.createRouter = createRouter;
 
     return exports;

package/dist/index.legacy.js

@@ -67,6 +67,16 @@ var __ktjs_router__ = (function (exports) {
         }
     }
 
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+
     typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
         var e = new Error(message);
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -229,6 +239,16 @@ var __ktjs_router__ = (function (exports) {
         };
     };
 
+    /**
+     * Create a router view container that automatically renders route components
+     */
+    function KTRouter(_a) {
+        var router = _a.router;
+        var view = document.createElement('kt-router-view');
+        router.setRouterView(view);
+        return view;
+    }
+
     /**
      * Create a new router instance
      */
@@ -242,6 +262,7 @@ var __ktjs_router__ = (function (exports) {
         var asyncGuards = (_e = config.asyncGuards) !== null && _e !== void 0 ? _e : true;
         // # private values
         var routes = [];
+        var routerView = null;
         /**
          * Normalize routes by adding default guards
          */
@@ -256,6 +277,7 @@ var __ktjs_router__ = (function (exports) {
                     beforeEnter: (_c = route.beforeEnter) !== null && _c !== void 0 ? _c : defaultHook,
                     after: (_d = route.after) !== null && _d !== void 0 ? _d : defaultHook,
                     children: route.children ? normalize(route.children, path) : [],
+                    component: route.component,
                 };
                 // directly push the normalized route to the list
                 // avoid flatten them again
@@ -272,26 +294,38 @@ var __ktjs_router__ = (function (exports) {
         var executeGuardsSync = function (to, from, guardLevel) {
             try {
                 if (guardLevel === 0 /* GuardLevel.None */) {
-                    return true;
+                    return { continue: true };
                 }
                 if (guardLevel & 1 /* GuardLevel.Global */) {
                     var result = beforeEach(to, from);
                     if (result === false) {
-                        return false;
+                        return { continue: false };
+                    }
+                    if (typeof result === 'string') {
+                        return { continue: false, redirectTo: { path: result } };
+                    }
+                    if (result && typeof result === 'object' && !('then' in result)) {
+                        return { continue: false, redirectTo: result };
                     }
                 }
                 if (guardLevel & 2 /* GuardLevel.Route */) {
                     var targetRoute = to.matched[to.matched.length - 1];
                     var result = targetRoute.beforeEnter(to);
                     if (result === false) {
-                        return false;
+                        return { continue: false };
+                    }
+                    if (typeof result === 'string') {
+                        return { continue: false, redirectTo: { path: result } };
+                    }
+                    if (result && typeof result === 'object' && !('then' in result)) {
+                        return { continue: false, redirectTo: result };
                     }
                 }
-                return true;
+                return { continue: true };
             }
             catch (error) {
                 onError(error);
-                return false;
+                return { continue: false };
             }
         };
         var executeGuards = function (to, from, guardLevel) { return __awaiter(void 0, void 0, void 0, function () {
@@ -299,30 +333,46 @@ var __ktjs_router__ = (function (exports) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        _a.trys.push([0, 3, , 4]);
+                        _a.trys.push([0, 5, , 6]);
                         if (guardLevel === 0 /* GuardLevel.None */) {
-                            return [2 /*return*/, true];
+                            return [2 /*return*/, { continue: true }];
                         }
                         if (!(guardLevel & 1 /* GuardLevel.Global */)) return [3 /*break*/, 2];
                         return [4 /*yield*/, beforeEach(to, from)];
                     case 1:
                         result = _a.sent();
                         if (result === false) {
-                            return [2 /*return*/, false];
+                            return [2 /*return*/, { continue: false }];
+                        }
+                        if (typeof result === 'string') {
+                            return [2 /*return*/, { continue: false, redirectTo: { path: result } }];
+                        }
+                        if (result && typeof result === 'object') {
+                            return [2 /*return*/, { continue: false, redirectTo: result }];
                         }
                         _a.label = 2;
                     case 2:
-                        if (guardLevel & 2 /* GuardLevel.Route */) {
-                            targetRoute = to.matched[to.matched.length - 1];
-                            result = targetRoute.beforeEnter(to);
-                            return [2 /*return*/, result !== false];
-                        }
-                        return [2 /*return*/, true];
+                        if (!(guardLevel & 2 /* GuardLevel.Route */)) return [3 /*break*/, 4];
+                        targetRoute = to.matched[to.matched.length - 1];
+                        return [4 /*yield*/, targetRoute.beforeEnter(to)];
                     case 3:
+                        result = _a.sent();
+                        if (result === false) {
+                            return [2 /*return*/, { continue: false }];
+                        }
+                        if (typeof result === 'string') {
+                            return [2 /*return*/, { continue: false, redirectTo: { path: result } }];
+                        }
+                        if (result && typeof result === 'object') {
+                            return [2 /*return*/, { continue: false, redirectTo: result }];
+                        }
+                        _a.label = 4;
+                    case 4: return [2 /*return*/, { continue: true }];
+                    case 5:
                         error_1 = _a.sent();
                         onError(error_1);
-                        return [2 /*return*/, false];
-                    case 4: return [2 /*return*/];
+                        return [2 /*return*/, { continue: false }];
+                    case 6: return [2 /*return*/];
                 }
             });
         }); };
@@ -373,16 +423,27 @@ var __ktjs_router__ = (function (exports) {
                 fullPath: fullPath,
             };
         };
-        var navigateSync = function (options) {
+        var navigateSync = function (options, redirectCount) {
             var _a;
+            if (redirectCount === void 0) { redirectCount = 0; }
             try {
+                // Prevent infinite redirect loop
+                if (redirectCount > 10) {
+                    onError(new Error('Maximum redirect count exceeded'));
+                    return false;
+                }
                 var prep = navigatePrepare(options);
                 if (!prep) {
                     return false;
                 }
                 var guardLevel = prep.guardLevel, replace = prep.replace, to = prep.to, fullPath = prep.fullPath;
                 // Execute guards
-                if (!executeGuardsSync(to, current, guardLevel)) {
+                var guardResult = executeGuardsSync(to, current, guardLevel);
+                if (!guardResult.continue) {
+                    // Check if there's a redirect
+                    if (guardResult.redirectTo) {
+                        return navigateSync(guardResult.redirectTo, redirectCount + 1);
+                    }
                     return false;
                 }
                 // Update browser history
@@ -396,6 +457,23 @@ var __ktjs_router__ = (function (exports) {
                 // Update current route
                 current = to;
                 history.push(to);
+                // Render component if routerView exists
+                if (routerView && to.matched.length > 0) {
+                    var route = to.matched[to.matched.length - 1];
+                    if (route.component) {
+                        var element = route.component();
+                        if (element instanceof Promise) {
+                            element.then(function (el) {
+                                routerView.innerHTML = '';
+                                routerView.appendChild(el);
+                            });
+                        }
+                        else {
+                            routerView.innerHTML = '';
+                            routerView.appendChild(element);
+                        }
+                    }
+                }
                 // Execute after hooks
                 executeAfterHooksSync(to, (_a = history[history.length - 2]) !== null && _a !== void 0 ? _a : null);
                 return true;
@@ -405,41 +483,69 @@ var __ktjs_router__ = (function (exports) {
                 return false;
             }
         };
-        var navigateAsync = function (options) { return __awaiter(void 0, void 0, void 0, function () {
-            var prep, guardLevel, replace, to, fullPath, passed, url, error_2;
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        _b.trys.push([0, 2, , 3]);
-                        prep = navigatePrepare(options);
-                        if (!prep) {
-                            return [2 /*return*/, false];
-                        }
-                        guardLevel = prep.guardLevel, replace = prep.replace, to = prep.to, fullPath = prep.fullPath;
-                        return [4 /*yield*/, executeGuards(to, current, guardLevel)];
-                    case 1:
-                        passed = _b.sent();
-                        if (!passed) {
+        var navigateAsync = function (options_1) {
+            var args_1 = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                args_1[_i - 1] = arguments[_i];
+            }
+            return __awaiter(void 0, __spreadArray([options_1], args_1, true), void 0, function (options, redirectCount) {
+                var prep, guardLevel, replace, to, fullPath, guardResult, url, route, element, error_2;
+                var _a;
+                if (redirectCount === void 0) { redirectCount = 0; }
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            _b.trys.push([0, 4, , 5]);
+                            // Prevent infinite redirect loop
+                            if (redirectCount > 10) {
+                                onError(new Error('Maximum redirect count exceeded'));
+                                return [2 /*return*/, false];
+                            }
+                            prep = navigatePrepare(options);
+                            if (!prep) {
+                                return [2 /*return*/, false];
+                            }
+                            guardLevel = prep.guardLevel, replace = prep.replace, to = prep.to, fullPath = prep.fullPath;
+                            return [4 /*yield*/, executeGuards(to, current, guardLevel)];
+                        case 1:
+                            guardResult = _b.sent();
+                            if (!guardResult.continue) {
+                                // Check if there's a redirect
+                                if (guardResult.redirectTo) {
+                                    return [2 /*return*/, navigateAsync(guardResult.redirectTo, redirectCount + 1)];
+                                }
+                                return [2 /*return*/, false];
+                            }
+                            url = fullPath;
+                            if (replace) {
+                                window.history.replaceState({ path: to.path }, '', url);
+                            }
+                            else {
+                                window.history.pushState({ path: to.path }, '', url);
+                            }
+                            current = to;
+                            history.push(to);
+                            if (!(routerView && to.matched.length > 0)) return [3 /*break*/, 3];
+                            route = to.matched[to.matched.length - 1];
+                            if (!route.component) return [3 /*break*/, 3];
+                            return [4 /*yield*/, route.component()];
+                        case 2:
+                            element = _b.sent();
+                            routerView.innerHTML = '';
+                            routerView.appendChild(element);
+                            _b.label = 3;
+                        case 3:
+                            executeAfterHooks(to, (_a = history[history.length - 2]) !== null && _a !== void 0 ? _a : null);
+                            return [2 /*return*/, true];
+                        case 4:
+                            error_2 = _b.sent();
+                            onError(error_2);
                             return [2 /*return*/, false];
-                        }
-                        url = fullPath;
-                        if (replace) {
-                            window.history.replaceState({ path: to.path }, '', url);
-                        }
-                        else {
-                            window.history.pushState({ path: to.path }, '', url);
-                        }
-                        executeAfterHooks(to, (_a = history[history.length - 2]) !== null && _a !== void 0 ? _a : null);
-                        return [2 /*return*/, true];
-                    case 2:
-                        error_2 = _b.sent();
-                        onError(error_2);
-                        return [2 /*return*/, false];
-                    case 3: return [2 /*return*/];
-                }
+                        case 5: return [2 /*return*/];
+                    }
+                });
             });
-        }); };
+        };
         var navigate = asyncGuards ? navigateSync : navigateAsync;
         var executeAfterHooksSync = function (to, from) {
             var targetRoute = to.matched[to.matched.length - 1];
@@ -492,6 +598,9 @@ var __ktjs_router__ = (function (exports) {
             get history() {
                 return history.concat();
             },
+            setRouterView: function (view) {
+                routerView = view;
+            },
             push: function (location) {
                 var options = normalizeLocation(location);
                 return navigate(options);
@@ -513,6 +622,7 @@ var __ktjs_router__ = (function (exports) {
         };
     };
 
+    exports.KTRouter = KTRouter;
     exports.createRouter = createRouter;
 
     return exports;

package/dist/index.mjs

@@ -147,6 +147,15 @@ const createMatcher = (routes) => {
     };
 };
 
+/**
+ * Create a router view container that automatically renders route components
+ */
+function KTRouter({ router }) {
+    const view = document.createElement('kt-router-view');
+    router.setRouterView(view);
+    return view;
+}
+
 /**
  * Create a new router instance
  */
@@ -159,6 +168,7 @@ const createRouter = (config) => {
     const asyncGuards = config.asyncGuards ?? true;
     // # private values
     const routes = [];
+    let routerView = null;
     /**
      * Normalize routes by adding default guards
      */
@@ -171,6 +181,7 @@ const createRouter = (config) => {
             beforeEnter: route.beforeEnter ?? defaultHook,
             after: route.after ?? defaultHook,
             children: route.children ? normalize(route.children, path) : [],
+            component: route.component,
         };
         // directly push the normalized route to the list
         // avoid flatten them again
@@ -186,49 +197,75 @@ const createRouter = (config) => {
     const executeGuardsSync = (to, from, guardLevel) => {
         try {
             if (guardLevel === 0 /* GuardLevel.None */) {
-                return true;
+                return { continue: true };
             }
             if (guardLevel & 1 /* GuardLevel.Global */) {
                 const result = beforeEach(to, from);
                 if (result === false) {
-                    return false;
+                    return { continue: false };
+                }
+                if (typeof result === 'string') {
+                    return { continue: false, redirectTo: { path: result } };
+                }
+                if (result && typeof result === 'object' && !('then' in result)) {
+                    return { continue: false, redirectTo: result };
                 }
             }
             if (guardLevel & 2 /* GuardLevel.Route */) {
                 const targetRoute = to.matched[to.matched.length - 1];
                 const result = targetRoute.beforeEnter(to);
                 if (result === false) {
-                    return false;
+                    return { continue: false };
+                }
+                if (typeof result === 'string') {
+                    return { continue: false, redirectTo: { path: result } };
+                }
+                if (result && typeof result === 'object' && !('then' in result)) {
+                    return { continue: false, redirectTo: result };
                 }
             }
-            return true;
+            return { continue: true };
         }
         catch (error) {
             onError(error);
-            return false;
+            return { continue: false };
         }
     };
     const executeGuards = async (to, from, guardLevel) => {
         try {
             if (guardLevel === 0 /* GuardLevel.None */) {
-                return true;
+                return { continue: true };
             }
             if (guardLevel & 1 /* GuardLevel.Global */) {
                 const result = await beforeEach(to, from);
                 if (result === false) {
-                    return false;
+                    return { continue: false };
+                }
+                if (typeof result === 'string') {
+                    return { continue: false, redirectTo: { path: result } };
+                }
+                if (result && typeof result === 'object') {
+                    return { continue: false, redirectTo: result };
                 }
             }
             if (guardLevel & 2 /* GuardLevel.Route */) {
                 const targetRoute = to.matched[to.matched.length - 1];
-                const result = targetRoute.beforeEnter(to);
-                return result !== false;
+                const result = await targetRoute.beforeEnter(to);
+                if (result === false) {
+                    return { continue: false };
+                }
+                if (typeof result === 'string') {
+                    return { continue: false, redirectTo: { path: result } };
+                }
+                if (result && typeof result === 'object') {
+                    return { continue: false, redirectTo: result };
+                }
             }
-            return true;
+            return { continue: true };
         }
         catch (error) {
             onError(error);
-            return false;
+            return { continue: false };
         }
     };
     const navigatePrepare = (options) => {
@@ -277,15 +314,25 @@ const createRouter = (config) => {
             fullPath,
         };
     };
-    const navigateSync = (options) => {
+    const navigateSync = (options, redirectCount = 0) => {
         try {
+            // Prevent infinite redirect loop
+            if (redirectCount > 10) {
+                onError(new Error('Maximum redirect count exceeded'));
+                return false;
+            }
             const prep = navigatePrepare(options);
             if (!prep) {
                 return false;
             }
             const { guardLevel, replace, to, fullPath } = prep;
             // Execute guards
-            if (!executeGuardsSync(to, current, guardLevel)) {
+            const guardResult = executeGuardsSync(to, current, guardLevel);
+            if (!guardResult.continue) {
+                // Check if there's a redirect
+                if (guardResult.redirectTo) {
+                    return navigateSync(guardResult.redirectTo, redirectCount + 1);
+                }
                 return false;
             }
             // Update browser history
@@ -299,6 +346,23 @@ const createRouter = (config) => {
             // Update current route
             current = to;
             history.push(to);
+            // Render component if routerView exists
+            if (routerView && to.matched.length > 0) {
+                const route = to.matched[to.matched.length - 1];
+                if (route.component) {
+                    const element = route.component();
+                    if (element instanceof Promise) {
+                        element.then((el) => {
+                            routerView.innerHTML = '';
+                            routerView.appendChild(el);
+                        });
+                    }
+                    else {
+                        routerView.innerHTML = '';
+                        routerView.appendChild(element);
+                    }
+                }
+            }
             // Execute after hooks
             executeAfterHooksSync(to, history[history.length - 2] ?? null);
             return true;
@@ -308,15 +372,24 @@ const createRouter = (config) => {
             return false;
         }
     };
-    const navigateAsync = async (options) => {
+    const navigateAsync = async (options, redirectCount = 0) => {
         try {
+            // Prevent infinite redirect loop
+            if (redirectCount > 10) {
+                onError(new Error('Maximum redirect count exceeded'));
+                return false;
+            }
             const prep = navigatePrepare(options);
             if (!prep) {
                 return false;
             }
             const { guardLevel, replace, to, fullPath } = prep;
-            const passed = await executeGuards(to, current, guardLevel);
-            if (!passed) {
+            const guardResult = await executeGuards(to, current, guardLevel);
+            if (!guardResult.continue) {
+                // Check if there's a redirect
+                if (guardResult.redirectTo) {
+                    return navigateAsync(guardResult.redirectTo, redirectCount + 1);
+                }
                 return false;
             }
             // ---- Guards passed ----
@@ -327,6 +400,17 @@ const createRouter = (config) => {
             else {
                 window.history.pushState({ path: to.path }, '', url);
             }
+            current = to;
+            history.push(to);
+            // Render component if routerView exists
+            if (routerView && to.matched.length > 0) {
+                const route = to.matched[to.matched.length - 1];
+                if (route.component) {
+                    const element = await route.component();
+                    routerView.innerHTML = '';
+                    routerView.appendChild(element);
+                }
+            }
             executeAfterHooks(to, history[history.length - 2] ?? null);
             return true;
         }
@@ -375,6 +459,9 @@ const createRouter = (config) => {
         get history() {
             return history.concat();
         },
+        setRouterView(view) {
+            routerView = view;
+        },
         push(location) {
             const options = normalizeLocation(location);
             return navigate(options);
@@ -396,4 +483,4 @@ const createRouter = (config) => {
     };
 };
 
-export { createRouter };
+export { KTRouter, createRouter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/router",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "description": "Router for kt.js - client-side routing with navigation guards",
   "type": "module",
   "module": "./dist/index.mjs",
@@ -31,7 +31,7 @@
     "directory": "packages/router"
   },
   "dependencies": {
-    "@ktjs/core": "0.13.0"
+    "@ktjs/core": "0.14.3"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",