@xfe-repo/web-router 1.2.5 → 1.2.7

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { History } from 'history';
 import { LoadableComponent, loadableReady } from '@loadable/component';
+import { History } from 'history';
 import { ParsedQuery } from '@xfe-repo/web-utils/tools';
 import React, { ReactElement, PropsWithChildren, ComponentType } from 'react';
 import { RegisterComponentStatic } from '@xfe-repo/web-register';
@@ -22,6 +22,12 @@ declare const routerIndexRegx: RegExp;
 declare const routerDynamicRegx: RegExp;
 declare const getRoutes: (config: GetRoutesConfig) => RouteConfig[];
 
+type LinkProps = Omit<LinkProps$1, 'to'> & {
+    to: string;
+    preload?: boolean;
+};
+declare const Link: React.MemoExoticComponent<(props: LinkProps) => react_jsx_runtime.JSX.Element>;
+
 type RouterProps = PropsWithChildren<{
     navigator: NavigatorType;
     routes: RouteConfig[];
@@ -30,11 +36,60 @@ type RouterProps = PropsWithChildren<{
 }>;
 declare const Router: React.MemoExoticComponent<(props: RouterProps) => react_jsx_runtime.JSX.Element>;
 
-type LinkProps = Omit<LinkProps$1, 'to'> & {
-    to: string;
-    preload?: boolean;
-};
-declare const Link: React.MemoExoticComponent<(props: LinkProps) => react_jsx_runtime.JSX.Element>;
+/**
+ * History API 拦截器
+ *
+ * 劫持 history.pushState 和 history.replaceState 方法，
+ * 在调用原始方法后触发标准化的 historychange 事件。
+ *
+ * @example
+ * // 监听 URL 变化
+ * window.addEventListener('historychange', (event) => {
+ *   console.log('URL changed:', event.detail.url)
+ * })
+ */
+/** 自定义事件名称 */
+declare const HISTORY_CHANGE_EVENT = "historychange";
+/** History 变化事件详情 */
+interface HistoryChangeEventDetail {
+    /** 变化类型 */
+    type: 'pushState' | 'replaceState' | 'popstate';
+    /** 完整 URL */
+    url: string;
+    /** 路径部分 */
+    pathname: string;
+    /** 查询参数部分 */
+    search: string;
+    /** hash 部分 */
+    hash: string;
+    /** history state */
+    state: any;
+    /** 时间戳 */
+    timestamp: number;
+}
+/** History 变化事件类型 */
+interface HistoryChangeEvent extends CustomEvent<HistoryChangeEventDetail> {
+    type: typeof HISTORY_CHANGE_EVENT;
+}
+/**
+ * 初始化 history 拦截器
+ *
+ * 劫持 history.pushState 和 history.replaceState 方法，
+ * 在调用原始方法后触发 historychange 事件。
+ * 同时监听原生 popstate 事件并转发为 historychange 事件。
+ *
+ * @returns 清理函数，用于恢复原始方法和移除监听器
+ */
+declare function initHistoryInterceptor(): () => void;
+/** 检查拦截器是否已初始化 */
+declare function isHistoryIntercepted(): boolean;
+/**
+ * 事件监听函数
+ *
+ * @param callback 回调函数
+ * @returns 取消监听的函数
+ */
+declare function onHistoryChange(callback: (detail: HistoryChangeEventDetail) => void): () => void;
 
 interface NavigatorType extends History {
     preload: (path: string, isReplace?: boolean, query?: ParsedQuery<string | number | boolean>) => Promise<void>;
@@ -50,4 +105,4 @@ declare function createNavigator(options: CreateNavigatorOptions): NavigatorType
 declare const getClientNavigator: () => NavigatorType;
 declare const routerReady: typeof loadableReady;
 
-export { type CreateNavigatorOptions, type GetRoutesConfig, Link, type NavigatorType, type PageComponent, type RouteConfig, Router, createNavigator, getClientNavigator, getRoutes, routerDynamicRegx, routerIndexRegx, routerReady };
+export { type CreateNavigatorOptions, type GetRoutesConfig, HISTORY_CHANGE_EVENT, type HistoryChangeEvent, type HistoryChangeEventDetail, Link, type NavigatorType, type PageComponent, type RouteConfig, Router, createNavigator, getClientNavigator, getRoutes, initHistoryInterceptor, isHistoryIntercepted, onHistoryChange, routerDynamicRegx, routerIndexRegx, routerReady };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { History } from 'history';
 import { LoadableComponent, loadableReady } from '@loadable/component';
+import { History } from 'history';
 import { ParsedQuery } from '@xfe-repo/web-utils/tools';
 import React, { ReactElement, PropsWithChildren, ComponentType } from 'react';
 import { RegisterComponentStatic } from '@xfe-repo/web-register';
@@ -22,6 +22,12 @@ declare const routerIndexRegx: RegExp;
 declare const routerDynamicRegx: RegExp;
 declare const getRoutes: (config: GetRoutesConfig) => RouteConfig[];
 
+type LinkProps = Omit<LinkProps$1, 'to'> & {
+    to: string;
+    preload?: boolean;
+};
+declare const Link: React.MemoExoticComponent<(props: LinkProps) => react_jsx_runtime.JSX.Element>;
+
 type RouterProps = PropsWithChildren<{
     navigator: NavigatorType;
     routes: RouteConfig[];
@@ -30,11 +36,60 @@ type RouterProps = PropsWithChildren<{
 }>;
 declare const Router: React.MemoExoticComponent<(props: RouterProps) => react_jsx_runtime.JSX.Element>;
 
-type LinkProps = Omit<LinkProps$1, 'to'> & {
-    to: string;
-    preload?: boolean;
-};
-declare const Link: React.MemoExoticComponent<(props: LinkProps) => react_jsx_runtime.JSX.Element>;
+/**
+ * History API 拦截器
+ *
+ * 劫持 history.pushState 和 history.replaceState 方法，
+ * 在调用原始方法后触发标准化的 historychange 事件。
+ *
+ * @example
+ * // 监听 URL 变化
+ * window.addEventListener('historychange', (event) => {
+ *   console.log('URL changed:', event.detail.url)
+ * })
+ */
+/** 自定义事件名称 */
+declare const HISTORY_CHANGE_EVENT = "historychange";
+/** History 变化事件详情 */
+interface HistoryChangeEventDetail {
+    /** 变化类型 */
+    type: 'pushState' | 'replaceState' | 'popstate';
+    /** 完整 URL */
+    url: string;
+    /** 路径部分 */
+    pathname: string;
+    /** 查询参数部分 */
+    search: string;
+    /** hash 部分 */
+    hash: string;
+    /** history state */
+    state: any;
+    /** 时间戳 */
+    timestamp: number;
+}
+/** History 变化事件类型 */
+interface HistoryChangeEvent extends CustomEvent<HistoryChangeEventDetail> {
+    type: typeof HISTORY_CHANGE_EVENT;
+}
+/**
+ * 初始化 history 拦截器
+ *
+ * 劫持 history.pushState 和 history.replaceState 方法，
+ * 在调用原始方法后触发 historychange 事件。
+ * 同时监听原生 popstate 事件并转发为 historychange 事件。
+ *
+ * @returns 清理函数，用于恢复原始方法和移除监听器
+ */
+declare function initHistoryInterceptor(): () => void;
+/** 检查拦截器是否已初始化 */
+declare function isHistoryIntercepted(): boolean;
+/**
+ * 事件监听函数
+ *
+ * @param callback 回调函数
+ * @returns 取消监听的函数
+ */
+declare function onHistoryChange(callback: (detail: HistoryChangeEventDetail) => void): () => void;
 
 interface NavigatorType extends History {
     preload: (path: string, isReplace?: boolean, query?: ParsedQuery<string | number | boolean>) => Promise<void>;
@@ -50,4 +105,4 @@ declare function createNavigator(options: CreateNavigatorOptions): NavigatorType
 declare const getClientNavigator: () => NavigatorType;
 declare const routerReady: typeof loadableReady;
 
-export { type CreateNavigatorOptions, type GetRoutesConfig, Link, type NavigatorType, type PageComponent, type RouteConfig, Router, createNavigator, getClientNavigator, getRoutes, routerDynamicRegx, routerIndexRegx, routerReady };
+export { type CreateNavigatorOptions, type GetRoutesConfig, HISTORY_CHANGE_EVENT, type HistoryChangeEvent, type HistoryChangeEventDetail, Link, type NavigatorType, type PageComponent, type RouteConfig, Router, createNavigator, getClientNavigator, getRoutes, initHistoryInterceptor, isHistoryIntercepted, onHistoryChange, routerDynamicRegx, routerIndexRegx, routerReady };

package/dist/index.js

@@ -261,6 +261,9 @@ var __toCommonJS = function(mod) {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+    HISTORY_CHANGE_EVENT: function() {
+        return HISTORY_CHANGE_EVENT;
+    },
     Link: function() {
         return Link;
     },
@@ -276,6 +279,15 @@ __export(src_exports, {
     getRoutes: function() {
         return getRoutes;
     },
+    initHistoryInterceptor: function() {
+        return initHistoryInterceptor;
+    },
+    isHistoryIntercepted: function() {
+        return isHistoryIntercepted;
+    },
+    onHistoryChange: function() {
+        return onHistoryChange;
+    },
     routerDynamicRegx: function() {
         return routerDynamicRegx;
     },
@@ -287,86 +299,89 @@ __export(src_exports, {
     }
 });
 module.exports = __toCommonJS(src_exports);
-var import_history = require("history");
 var import_component2 = require("@loadable/component");
+var import_history = require("history");
 var import_react_router_dom3 = require("react-router-dom");
 var import_tools = require("@xfe-repo/web-utils/tools");
-__reExport(src_exports, require("react-router-dom"), module.exports);
-// src/routes.ts
-var import_component = __toESM(require("@loadable/component"));
-var routerIndexRegx = /^(?!.*component)(.*)?\/index(\[[^.]+])?\.(ts|js)x?$/;
-var routerDynamicRegx = /\[([^.]+)]/;
-var getRoutes = function(config) {
-    var pagesIndexPath = config.pagesIndexPath, getRoutePath = config.getRoutePath, getPageComponents = config.getPageComponents, fallback = config.fallback;
-    var routes = [];
-    pagesIndexPath.forEach(function(pageIndexPath) {
-        var _pageIndexPath_match;
-        if (pageIndexPath.startsWith("./")) return;
-        var pageComponent = (0, import_component.default)(function() {
-            return getPageComponents(pageIndexPath);
-        }, {
-            fallback: fallback
-        });
-        var routerPath = getRoutePath ? getRoutePath(pageIndexPath) : pageIndexPath.replace(routerIndexRegx, "$1");
-        if (routerPath === "home" || routerPath === "index") routerPath = "/";
-        var dynamicRoute = ((_pageIndexPath_match = pageIndexPath.match(routerDynamicRegx)) === null || _pageIndexPath_match === void 0 ? void 0 : _pageIndexPath_match[1]) || "";
-        if (dynamicRoute) routerPath = "".concat(routerPath, "/").concat(dynamicRoute);
-        var config2 = {
-            path: routerPath,
-            Component: pageComponent
-        };
-        routes.push(config2);
+// src/historyInterceptor.ts
+var HISTORY_CHANGE_EVENT = "historychange";
+var originalPushState = null;
+var originalReplaceState = null;
+var isIntercepted = false;
+function dispatchHistoryChangeEvent(detail) {
+    var event = new CustomEvent(HISTORY_CHANGE_EVENT, {
+        detail: detail,
+        bubbles: false,
+        cancelable: false
     });
-    return routes;
-};
-// src/Router.tsx
+    window.dispatchEvent(event);
+}
+function createEventDetail(type, state) {
+    return {
+        type: type,
+        url: window.location.href,
+        pathname: window.location.pathname,
+        search: window.location.search,
+        hash: window.location.hash,
+        state: state,
+        timestamp: Date.now()
+    };
+}
+function initHistoryInterceptor() {
+    if (isIntercepted) {
+        return function() {};
+    }
+    originalPushState = history.pushState;
+    originalReplaceState = history.replaceState;
+    history.pushState = function(state, unused, url) {
+        originalPushState.call(this, state, unused, url);
+        dispatchHistoryChangeEvent(createEventDetail("pushState", state));
+    };
+    history.replaceState = function(state, unused, url) {
+        originalReplaceState.call(this, state, unused, url);
+        dispatchHistoryChangeEvent(createEventDetail("replaceState", state));
+    };
+    var handlePopState = function() {
+        dispatchHistoryChangeEvent(createEventDetail("popstate", history.state));
+    };
+    window.addEventListener("popstate", handlePopState);
+    isIntercepted = true;
+    return function() {
+        if (originalPushState) {
+            history.pushState = originalPushState;
+            originalPushState = null;
+        }
+        if (originalReplaceState) {
+            history.replaceState = originalReplaceState;
+            originalReplaceState = null;
+        }
+        window.removeEventListener("popstate", handlePopState);
+        isIntercepted = false;
+    };
+}
+function isHistoryIntercepted() {
+    return isIntercepted;
+}
+function onHistoryChange(callback) {
+    var handler = function(event) {
+        var customEvent = event;
+        callback(customEvent.detail);
+    };
+    window.addEventListener(HISTORY_CHANGE_EVENT, handler);
+    return function() {
+        window.removeEventListener(HISTORY_CHANGE_EVENT, handler);
+    };
+}
+// src/index.ts
+__reExport(src_exports, require("react-router-dom"), module.exports);
+// src/Link.tsx
 var import_react = require("react");
 var import_react_router_dom = require("react-router-dom");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Router = (0, import_react.memo)(function(props) {
-    var navigator = props.navigator, routes = props.routes, _props_basename = props.basename, basename = _props_basename === void 0 ? "/" : _props_basename, children = props.children, NotFoundPageComponent = props.NotFoundPageComponent;
-    var _ref = _sliced_to_array((0, import_react.useState)({
-        action: navigator.action,
-        location: navigator.location
-    }), 2), navigatorState = _ref[0], setNavigatorState = _ref[1];
-    (0, import_react.useEffect)(function() {
-        return navigator.listen(setNavigatorState);
-    }, [
-        navigator
-    ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Router, {
-        navigator: navigator,
-        navigationType: navigatorState.action,
-        location: navigatorState.location,
-        basename: basename,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Routes, {
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_router_dom.Route, {
-                path: "/",
-                element: children,
-                children: [
-                    routes.map(function(param) {
-                        var path = param.path, Component = param.Component;
-                        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, {
-                            path: path,
-                            Component: Component
-                        }, path);
-                    }),
-                    NotFoundPageComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, {
-                        path: "*",
-                        Component: NotFoundPageComponent
-                    })
-                ]
-            })
-        })
-    });
-});
-// src/Link.tsx
-var import_react2 = require("react");
-var import_react_router_dom2 = require("react-router-dom");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Link = (0, import_react2.memo)(function(props) {
-    var to = props.to, children = props.children, preload = props.preload, replace = props.replace, className = props.className, target = props.target;
-    var _navigator2 = (0, import_react2.useMemo)(function() {
+var Link = (0, import_react.memo)(function(props) {
+    var originTo = props.to, children = props.children, preload = props.preload, replace = props.replace, className = props.className, target = props.target;
+    var to = (0, import_react_router_dom.useHref)(originTo);
+    var _navigator2 = (0, import_react.useMemo)(function() {
         return getClientNavigator();
     }, []);
     if (/http(s)?:\/{2}/.test(to)) {
@@ -379,7 +394,7 @@ var Link = (0, import_react2.memo)(function(props) {
                 window.location.href = to;
             }
         };
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
             href: to,
             onClick: handleLink,
             className: className,
@@ -413,15 +428,83 @@ var Link = (0, import_react2.memo)(function(props) {
                 return _ref.apply(this, arguments);
             };
         }();
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
             href: to,
             onClick: handleLink1,
             className: className,
             children: children
         });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_router_dom2.Link, _object_spread({}, props));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Link, _object_spread({}, props));
 });
+// src/Router.tsx
+var import_react2 = require("react");
+var import_react_router_dom2 = require("react-router-dom");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Router = (0, import_react2.memo)(function(props) {
+    var navigator = props.navigator, routes = props.routes, _props_basename = props.basename, basename = _props_basename === void 0 ? "/" : _props_basename, children = props.children, NotFoundPageComponent = props.NotFoundPageComponent;
+    var _ref = _sliced_to_array((0, import_react2.useState)({
+        action: navigator.action,
+        location: navigator.location
+    }), 2), navigatorState = _ref[0], setNavigatorState = _ref[1];
+    (0, import_react2.useEffect)(function() {
+        return navigator.listen(setNavigatorState);
+    }, [
+        navigator
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_router_dom2.Router, {
+        navigator: navigator,
+        navigationType: navigatorState.action,
+        location: navigatorState.location,
+        basename: basename,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_router_dom2.Routes, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_router_dom2.Route, {
+                path: "/",
+                element: children,
+                children: [
+                    routes.map(function(param) {
+                        var path = param.path, Component = param.Component;
+                        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_router_dom2.Route, {
+                            path: path,
+                            Component: Component
+                        }, path);
+                    }),
+                    NotFoundPageComponent && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_router_dom2.Route, {
+                        path: "*",
+                        Component: NotFoundPageComponent
+                    })
+                ]
+            })
+        })
+    });
+});
+// src/routes.ts
+var import_component = __toESM(require("@loadable/component"));
+var routerIndexRegx = /^(?!.*component)(.*)?\/index(\[[^.]+])?\.(ts|js)x?$/;
+var routerDynamicRegx = /\[([^.]+)]/;
+var getRoutes = function(config) {
+    var pagesIndexPath = config.pagesIndexPath, getRoutePath = config.getRoutePath, getPageComponents = config.getPageComponents, fallback = config.fallback;
+    var routes = [];
+    pagesIndexPath.forEach(function(pageIndexPath) {
+        var _pageIndexPath_match;
+        if (pageIndexPath.startsWith("./")) return;
+        var pageComponent = (0, import_component.default)(function() {
+            return getPageComponents(pageIndexPath);
+        }, {
+            fallback: fallback
+        });
+        var routerPath = getRoutePath ? getRoutePath(pageIndexPath) : pageIndexPath.replace(routerIndexRegx, "$1");
+        if (routerPath === "home" || routerPath === "index") routerPath = "/";
+        var dynamicRoute = ((_pageIndexPath_match = pageIndexPath.match(routerDynamicRegx)) === null || _pageIndexPath_match === void 0 ? void 0 : _pageIndexPath_match[1]) || "";
+        if (dynamicRoute) routerPath = "".concat(routerPath, "/").concat(dynamicRoute);
+        var config2 = {
+            path: routerPath,
+            Component: pageComponent
+        };
+        routes.push(config2);
+    });
+    return routes;
+};
 // src/index.ts
 var _navigator;
 function createNavigator(options) {
@@ -508,13 +591,18 @@ var getClientNavigator = function() {
     return _navigator;
 };
 var routerReady = import_component2.loadableReady;
+initHistoryInterceptor();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = _object_spread({
+    HISTORY_CHANGE_EVENT: HISTORY_CHANGE_EVENT,
     Link: Link,
     Router: Router,
     createNavigator: createNavigator,
     getClientNavigator: getClientNavigator,
     getRoutes: getRoutes,
+    initHistoryInterceptor: initHistoryInterceptor,
+    isHistoryIntercepted: isHistoryIntercepted,
+    onHistoryChange: onHistoryChange,
     routerDynamicRegx: routerDynamicRegx,
     routerIndexRegx: routerIndexRegx,
     routerReady: routerReady

package/dist/index.mjs

@@ -197,85 +197,88 @@ function _ts_generator(thisArg, body) {
         };
     }
 }
-import { createHashHistory, createBrowserHistory, createMemoryHistory } from "history";
 import { loadableReady } from "@loadable/component";
+import { createBrowserHistory, createHashHistory, createMemoryHistory } from "history";
 import { matchRoutes } from "react-router-dom";
 import { queryString } from "@xfe-repo/web-utils/tools";
-export * from "react-router-dom";
-// src/routes.ts
-import loadable from "@loadable/component";
-var routerIndexRegx = /^(?!.*component)(.*)?\/index(\[[^.]+])?\.(ts|js)x?$/;
-var routerDynamicRegx = /\[([^.]+)]/;
-var getRoutes = function(config) {
-    var pagesIndexPath = config.pagesIndexPath, getRoutePath = config.getRoutePath, getPageComponents = config.getPageComponents, fallback = config.fallback;
-    var routes = [];
-    pagesIndexPath.forEach(function(pageIndexPath) {
-        var _pageIndexPath_match;
-        if (pageIndexPath.startsWith("./")) return;
-        var pageComponent = loadable(function() {
-            return getPageComponents(pageIndexPath);
-        }, {
-            fallback: fallback
-        });
-        var routerPath = getRoutePath ? getRoutePath(pageIndexPath) : pageIndexPath.replace(routerIndexRegx, "$1");
-        if (routerPath === "home" || routerPath === "index") routerPath = "/";
-        var dynamicRoute = ((_pageIndexPath_match = pageIndexPath.match(routerDynamicRegx)) === null || _pageIndexPath_match === void 0 ? void 0 : _pageIndexPath_match[1]) || "";
-        if (dynamicRoute) routerPath = "".concat(routerPath, "/").concat(dynamicRoute);
-        var config2 = {
-            path: routerPath,
-            Component: pageComponent
-        };
-        routes.push(config2);
+// src/historyInterceptor.ts
+var HISTORY_CHANGE_EVENT = "historychange";
+var originalPushState = null;
+var originalReplaceState = null;
+var isIntercepted = false;
+function dispatchHistoryChangeEvent(detail) {
+    var event = new CustomEvent(HISTORY_CHANGE_EVENT, {
+        detail: detail,
+        bubbles: false,
+        cancelable: false
     });
-    return routes;
-};
-// src/Router.tsx
-import { memo, useState, useEffect } from "react";
-import { Router as OriginalRouter, Routes, Route } from "react-router-dom";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Router = memo(function(props) {
-    var navigator = props.navigator, routes = props.routes, _props_basename = props.basename, basename = _props_basename === void 0 ? "/" : _props_basename, children = props.children, NotFoundPageComponent = props.NotFoundPageComponent;
-    var _useState = _sliced_to_array(useState({
-        action: navigator.action,
-        location: navigator.location
-    }), 2), navigatorState = _useState[0], setNavigatorState = _useState[1];
-    useEffect(function() {
-        return navigator.listen(setNavigatorState);
-    }, [
-        navigator
-    ]);
-    return /* @__PURE__ */ jsx(OriginalRouter, {
-        navigator: navigator,
-        navigationType: navigatorState.action,
-        location: navigatorState.location,
-        basename: basename,
-        children: /* @__PURE__ */ jsx(Routes, {
-            children: /* @__PURE__ */ jsxs(Route, {
-                path: "/",
-                element: children,
-                children: [
-                    routes.map(function(param) {
-                        var path = param.path, Component = param.Component;
-                        return /* @__PURE__ */ jsx(Route, {
-                            path: path,
-                            Component: Component
-                        }, path);
-                    }),
-                    NotFoundPageComponent && /* @__PURE__ */ jsx(Route, {
-                        path: "*",
-                        Component: NotFoundPageComponent
-                    })
-                ]
-            })
-        })
-    });
-});
+    window.dispatchEvent(event);
+}
+function createEventDetail(type, state) {
+    return {
+        type: type,
+        url: window.location.href,
+        pathname: window.location.pathname,
+        search: window.location.search,
+        hash: window.location.hash,
+        state: state,
+        timestamp: Date.now()
+    };
+}
+function initHistoryInterceptor() {
+    if (isIntercepted) {
+        return function() {};
+    }
+    originalPushState = history.pushState;
+    originalReplaceState = history.replaceState;
+    history.pushState = function(state, unused, url) {
+        originalPushState.call(this, state, unused, url);
+        dispatchHistoryChangeEvent(createEventDetail("pushState", state));
+    };
+    history.replaceState = function(state, unused, url) {
+        originalReplaceState.call(this, state, unused, url);
+        dispatchHistoryChangeEvent(createEventDetail("replaceState", state));
+    };
+    var handlePopState = function() {
+        dispatchHistoryChangeEvent(createEventDetail("popstate", history.state));
+    };
+    window.addEventListener("popstate", handlePopState);
+    isIntercepted = true;
+    return function() {
+        if (originalPushState) {
+            history.pushState = originalPushState;
+            originalPushState = null;
+        }
+        if (originalReplaceState) {
+            history.replaceState = originalReplaceState;
+            originalReplaceState = null;
+        }
+        window.removeEventListener("popstate", handlePopState);
+        isIntercepted = false;
+    };
+}
+function isHistoryIntercepted() {
+    return isIntercepted;
+}
+function onHistoryChange(callback) {
+    var handler = function(event) {
+        var customEvent = event;
+        callback(customEvent.detail);
+    };
+    window.addEventListener(HISTORY_CHANGE_EVENT, handler);
+    return function() {
+        window.removeEventListener(HISTORY_CHANGE_EVENT, handler);
+    };
+}
+// src/index.ts
+export * from "react-router-dom";
 // src/Link.tsx
-import { memo as memo2, useMemo } from "react";
-import { Link as OriginalLink } from "react-router-dom";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Link = memo2(function(props) {
-    var to = props.to, children = props.children, preload = props.preload, replace = props.replace, className = props.className, target = props.target;
+import { memo, useMemo } from "react";
+import { Link as OriginalLink, useHref } from "react-router-dom";
+import { jsx } from "react/jsx-runtime";
+var Link = memo(function(props) {
+    var originTo = props.to, children = props.children, preload = props.preload, replace = props.replace, className = props.className, target = props.target;
+    var to = useHref(originTo);
     var _navigator2 = useMemo(function() {
         return getClientNavigator();
     }, []);
@@ -289,7 +292,7 @@ var Link = memo2(function(props) {
                 window.location.href = to;
             }
         };
-        return /* @__PURE__ */ jsx2("a", {
+        return /* @__PURE__ */ jsx("a", {
             href: to,
             onClick: handleLink,
             className: className,
@@ -323,15 +326,83 @@ var Link = memo2(function(props) {
                 return _ref.apply(this, arguments);
             };
         }();
-        return /* @__PURE__ */ jsx2("a", {
+        return /* @__PURE__ */ jsx("a", {
             href: to,
             onClick: handleLink1,
             className: className,
             children: children
         });
     }
-    return /* @__PURE__ */ jsx2(OriginalLink, _object_spread({}, props));
+    return /* @__PURE__ */ jsx(OriginalLink, _object_spread({}, props));
+});
+// src/Router.tsx
+import { memo as memo2, useState, useEffect } from "react";
+import { Router as OriginalRouter, Routes, Route } from "react-router-dom";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Router = memo2(function(props) {
+    var navigator = props.navigator, routes = props.routes, _props_basename = props.basename, basename = _props_basename === void 0 ? "/" : _props_basename, children = props.children, NotFoundPageComponent = props.NotFoundPageComponent;
+    var _useState = _sliced_to_array(useState({
+        action: navigator.action,
+        location: navigator.location
+    }), 2), navigatorState = _useState[0], setNavigatorState = _useState[1];
+    useEffect(function() {
+        return navigator.listen(setNavigatorState);
+    }, [
+        navigator
+    ]);
+    return /* @__PURE__ */ jsx2(OriginalRouter, {
+        navigator: navigator,
+        navigationType: navigatorState.action,
+        location: navigatorState.location,
+        basename: basename,
+        children: /* @__PURE__ */ jsx2(Routes, {
+            children: /* @__PURE__ */ jsxs(Route, {
+                path: "/",
+                element: children,
+                children: [
+                    routes.map(function(param) {
+                        var path = param.path, Component = param.Component;
+                        return /* @__PURE__ */ jsx2(Route, {
+                            path: path,
+                            Component: Component
+                        }, path);
+                    }),
+                    NotFoundPageComponent && /* @__PURE__ */ jsx2(Route, {
+                        path: "*",
+                        Component: NotFoundPageComponent
+                    })
+                ]
+            })
+        })
+    });
 });
+// src/routes.ts
+import loadable from "@loadable/component";
+var routerIndexRegx = /^(?!.*component)(.*)?\/index(\[[^.]+])?\.(ts|js)x?$/;
+var routerDynamicRegx = /\[([^.]+)]/;
+var getRoutes = function(config) {
+    var pagesIndexPath = config.pagesIndexPath, getRoutePath = config.getRoutePath, getPageComponents = config.getPageComponents, fallback = config.fallback;
+    var routes = [];
+    pagesIndexPath.forEach(function(pageIndexPath) {
+        var _pageIndexPath_match;
+        if (pageIndexPath.startsWith("./")) return;
+        var pageComponent = loadable(function() {
+            return getPageComponents(pageIndexPath);
+        }, {
+            fallback: fallback
+        });
+        var routerPath = getRoutePath ? getRoutePath(pageIndexPath) : pageIndexPath.replace(routerIndexRegx, "$1");
+        if (routerPath === "home" || routerPath === "index") routerPath = "/";
+        var dynamicRoute = ((_pageIndexPath_match = pageIndexPath.match(routerDynamicRegx)) === null || _pageIndexPath_match === void 0 ? void 0 : _pageIndexPath_match[1]) || "";
+        if (dynamicRoute) routerPath = "".concat(routerPath, "/").concat(dynamicRoute);
+        var config2 = {
+            path: routerPath,
+            Component: pageComponent
+        };
+        routes.push(config2);
+    });
+    return routes;
+};
 // src/index.ts
 var _navigator;
 function createNavigator(options) {
@@ -418,4 +489,5 @@ var getClientNavigator = function() {
     return _navigator;
 };
 var routerReady = loadableReady;
-export { Link, Router, createNavigator, getClientNavigator, getRoutes, routerDynamicRegx, routerIndexRegx, routerReady };
+initHistoryInterceptor();
+export { HISTORY_CHANGE_EVENT, Link, Router, createNavigator, getClientNavigator, getRoutes, initHistoryInterceptor, isHistoryIntercepted, onHistoryChange, routerDynamicRegx, routerIndexRegx, routerReady };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfe-repo/web-router",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "sideEffects": false,
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,7 +33,7 @@
     "@xfe-repo/typescript-config": "0.0.6"
   },
   "peerDependencies": {
-    "@xfe-repo/web-utils": "1.3.7"
+    "@xfe-repo/web-utils": "1.3.11"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"