@rsmax/web 1.3.12 → 1.3.13

package/cjs/createApp.js

@@ -3,41 +3,59 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const component_1 = __importDefault(require("@loadable/component"));
 const framework_shared_1 = require("@rsmax/framework-shared");
-const react_router_cache_route_1 = require("@remax/react-router-cache-route");
+const react_1 = __importDefault(require("react"));
 const react_router_dom_1 = require("react-router-dom");
-const component_1 = __importDefault(require("@loadable/component"));
+const KeepAlive_1 = require("./KeepAlive");
+const TabBar_1 = require("./TabBar");
 const createAppConfig_1 = __importDefault(require("./createAppConfig"));
 const createPageConfig_1 = __importDefault(require("./createPageConfig"));
-const TabBar_1 = require("./TabBar");
-function createApp(options, history) {
-    var _a, _b, _c;
+function createApp(options) {
+    var _a;
     const { async = true, appComponent, appConfig, pageComponents, pages, plugins = [] } = options;
     const AppConfig = (0, createAppConfig_1.default)(appComponent);
     const pluginDriver = new framework_shared_1.PluginDriver(plugins.map(plugin => plugin.default || plugin));
-    framework_shared_1.RuntimeOptions.apply({ pluginDriver });
     const pageComponentsHoc = pages.map((page, i) => {
-        const pageComponent = async
+        return async
             ? (0, component_1.default)(() => pageComponents[i]().then(({ default: c }) => (0, createPageConfig_1.default)(c, page.route)))
             : (0, createPageConfig_1.default)(pageComponents[i](), page.route);
-        return pageComponent;
     });
-    return (react_1.default.createElement(react_router_dom_1.Router, { history: history },
-        react_1.default.createElement(AppConfig, null,
-            react_1.default.createElement(react_router_cache_route_1.CacheSwitch, null,
-                react_1.default.createElement(react_router_dom_1.Route, { exact: true, path: "/" },
-                    react_1.default.createElement(react_router_dom_1.Redirect, { to: `/${(_a = pages[0]) === null || _a === void 0 ? void 0 : _a.route}` })),
-                pages.map((page, i) => {
-                    return (react_1.default.createElement(react_router_cache_route_1.CacheRoute, { key: page.route, className: "rsmax-cached-router-wrapper", path: `/${page.route}`, exact: true }, (props) => {
-                        const pageComponent = pageComponentsHoc[i];
-                        return react_1.default.createElement(pageComponent, Object.assign(Object.assign({}, props), { pageConfig: Object.assign(Object.assign({}, appConfig.window), page.config), tabBar: appConfig.tabBar }));
-                    }));
-                }),
-                react_1.default.createElement(react_router_dom_1.Route, null,
-                    react_1.default.createElement(react_router_dom_1.Redirect, { to: `/${(_b = pages[0]) === null || _b === void 0 ? void 0 : _b.route}` }))),
-            ((_c = appConfig.tabBar) === null || _c === void 0 ? void 0 : _c.items) && appConfig.tabBar.items.length > 0 && (react_1.default.createElement(TabBar_1.TabBar, { history: history, config: appConfig.tabBar })),
-            process.env.NODE_ENV === 'development' && react_1.default.createElement(LogLocation, null))));
+    const AppConfigElement = () => {
+        var _a, _b, _c;
+        const navigate = (0, react_router_dom_1.useNavigate)();
+        react_1.default.useEffect(() => {
+            framework_shared_1.RuntimeOptions.apply({ pluginDriver, navigate, mpa: false });
+        }, [navigate]);
+        return (react_1.default.createElement(AppConfig, null,
+            react_1.default.createElement(KeepAlive_1.KeepAliveProvider, null,
+                react_1.default.createElement(react_router_dom_1.Routes, null,
+                    react_1.default.createElement(react_router_dom_1.Route, { path: "/", element: react_1.default.createElement(react_router_dom_1.Navigate, { to: `/${(_a = pages[0]) === null || _a === void 0 ? void 0 : _a.route}`, replace: true }) }),
+                    pages.map((page, i) => {
+                        // 合并页面配置
+                        const pageConfig = Object.assign(Object.assign({}, appConfig.window), page.config);
+                        // 默认所有页面都开启keepAlive
+                        const pageElement = react_1.default.createElement(pageComponentsHoc[i], {
+                            pageConfig,
+                            tabBar: appConfig.tabBar,
+                        });
+                        return (react_1.default.createElement(react_router_dom_1.Route, { key: page.route, path: `/${page.route}`, element: react_1.default.createElement(KeepAlive_1.KeepAlive, { cacheKey: `/${page.route}` }, pageElement) }));
+                    }),
+                    react_1.default.createElement(react_router_dom_1.Route, { path: "*", element: 
+                        /*找不到路由时重定向到首页*/
+                        react_1.default.createElement(react_router_dom_1.Navigate, { to: `/${(_b = pages[0]) === null || _b === void 0 ? void 0 : _b.route}`, replace: true }) })),
+                ((_c = appConfig.tabBar) === null || _c === void 0 ? void 0 : _c.items) && appConfig.tabBar.items.length > 0 && react_1.default.createElement(TabBar_1.TabBar, { config: appConfig.tabBar }),
+                process.env.NODE_ENV === 'development' && react_1.default.createElement(LogLocation, null))));
+    };
+    if (((_a = options.appConfig.router) === null || _a === void 0 ? void 0 : _a.type) === 'browser') {
+        return (react_1.default.createElement(react_router_dom_1.BrowserRouter, null,
+            react_1.default.createElement(AppConfigElement, null)));
+    }
+    return (react_1.default.createElement(react_router_dom_1.HashRouter, { future: {
+            v7_startTransition: true,
+            v7_relativeSplatPath: true,
+        } },
+        react_1.default.createElement(AppConfigElement, null)));
 }
 exports.default = createApp;
 function LogLocation() {

package/cjs/createAppConfig.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const framework_shared_1 = require("@rsmax/framework-shared");
 const react_1 = __importDefault(require("react"));
 const react_is_1 = require("react-is");
-const framework_shared_1 = require("@rsmax/framework-shared");
 class DefaultAppComponent extends react_1.default.Component {
     render() {
         return react_1.default.createElement(react_1.default.Fragment, this.props);
@@ -16,6 +16,7 @@ function createAppConfig(App) {
         const config = {
             _instance: react_1.default.createRef(),
             callLifecycle(lifecycle, ...args) {
+                var _a;
                 const callbacks = framework_shared_1.AppInstanceContext.lifecycleCallback[lifecycle] || [];
                 let result;
                 callbacks.forEach((callback) => {
@@ -25,7 +26,7 @@ function createAppConfig(App) {
                     return result;
                 }
                 const callback = (0, framework_shared_1.callbackName)(lifecycle);
-                if (this._instance.current && this._instance.current[callback]) {
+                if ((_a = this._instance.current) === null || _a === void 0 ? void 0 : _a[callback]) {
                     return this._instance.current[callback](...args);
                 }
             },

package/cjs/createPageConfig.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TabBarConfig, PageConfig } from './types';
+import type { PageConfig, TabBarConfig } from './types';
 interface PageConfigProps {
     tabBar: TabBarConfig;
     pageConfig: PageConfig;

package/cjs/createPageConfig.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const qs_1 = __importDefault(require("qs"));
 const framework_shared_1 = require("@rsmax/framework-shared");
+const qs_1 = __importDefault(require("qs"));
+const react_1 = __importDefault(require("react"));
 const PullToRefresh_1 = __importDefault(require("./PullToRefresh"));
 const DEFAULT_REACH_BOTTOM_DISTANCE = 50;
 function createPageConfig(Page, name) {
@@ -20,6 +20,7 @@ function createPageConfig(Page, name) {
             };
         },
         callLifecycle(lifeCycle, ...args) {
+            var _a;
             const callbacks = this.lifeCycleCallback[lifeCycle] || [];
             let result;
             callbacks.forEach((callback) => {
@@ -29,7 +30,7 @@ function createPageConfig(Page, name) {
                 return result;
             }
             const callback = (0, framework_shared_1.callbackName)(lifeCycle);
-            if (this.wrapperRef.current && this.wrapperRef.current[callback]) {
+            if ((_a = this.wrapperRef.current) === null || _a === void 0 ? void 0 : _a[callback]) {
                 return this.wrapperRef.current[callback](...args);
             }
         },
@@ -37,6 +38,7 @@ function createPageConfig(Page, name) {
     const PageWrapper = (0, framework_shared_1.createPageWrapper)(Page, name);
     return class PageConfig extends react_1.default.Component {
         constructor(props) {
+            var _a, _b;
             super(props);
             this.state = {
                 refreshing: true,
@@ -101,8 +103,8 @@ function createPageConfig(Page, name) {
                 }
                 this.isReachBottom = isCurrentReachBottom;
             };
-            props.cacheLifecycles.didCache(this.componentDidCache);
-            props.cacheLifecycles.didRecover(this.componentDidRecover);
+            (_a = props.cacheLifecycles) === null || _a === void 0 ? void 0 : _a.didCache(this.componentDidCache);
+            (_b = props.cacheLifecycles) === null || _b === void 0 ? void 0 : _b.didRecover(this.componentDidRecover);
         }
         componentDidMount() {
             this.setTitle();
@@ -119,7 +121,7 @@ function createPageConfig(Page, name) {
             const { refreshing } = this.state;
             const hasTabBar = !!tabBar;
             const className = `rsmax-page ${hasTabBar ? 'with-tab-bar' : ''}`;
-            const query = qs_1.default.parse(location.search, { ignoreQueryPrefix: true });
+            const query = qs_1.default.parse(location === null || location === void 0 ? void 0 : location.search, { ignoreQueryPrefix: true });
             if (this.isPullDownRefreshEnabled()) {
                 return (react_1.default.createElement(PullToRefresh_1.default, { onRefresh: this.handleRefresh, refreshing: refreshing, distanceToRefresh: 50 },
                     react_1.default.createElement("div", { className: className }, react_1.default.createElement(PageWrapper, {

package/cjs/hooks/useQuery.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_router_dom_1 = require("react-router-dom");
-const qs_1 = __importDefault(require("qs"));
 const framework_shared_1 = require("@rsmax/framework-shared");
+const qs_1 = __importDefault(require("qs"));
+const react_router_dom_1 = require("react-router-dom");
 function useQuery() {
     const location = framework_shared_1.RuntimeOptions.get('mpa') ? window.location : (0, react_router_dom_1.useLocation)();
     return qs_1.default.parse(location.search, { ignoreQueryPrefix: true });

package/cjs/types/config.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export interface Page {
     route: string;
     config: PageConfig;

package/esm/KeepAlive.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const KeepAliveProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+interface KeepAliveProps {
+    cacheKey: string;
+    children: React.ReactNode;
+}
+export declare const KeepAlive: React.FC<KeepAliveProps>;
+export {};

package/esm/KeepAlive.js

@@ -0,0 +1,68 @@
+import React, { createContext, useContext, useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+const KeepAliveContext = createContext(null);
+export const KeepAliveProvider = ({ children }) => {
+    const [cache, setCache] = useState(new Map());
+    return (React.createElement(KeepAliveContext.Provider, { value: { cache, setCache } },
+        children,
+        Array.from(cache.entries()).map(([key, item]) => (React.createElement("div", { key: key, style: {
+                display: item.status === 'active' ? 'block' : 'none',
+                height: '100%',
+                width: '100%',
+            } }, item.component)))));
+};
+export const KeepAlive = ({ cacheKey, children }) => {
+    const context = useContext(KeepAliveContext);
+    const location = useLocation();
+    const componentRef = useRef(children);
+    if (!context) {
+        throw new Error('KeepAlive must be used within KeepAliveProvider');
+    }
+    const { cache, setCache } = context;
+    React.useEffect(() => {
+        // 更新组件引用
+        componentRef.current = children;
+        setCache(prev => {
+            const next = new Map(prev);
+            if (next.has(cacheKey)) {
+                next.set(cacheKey, Object.assign(Object.assign({}, next.get(cacheKey)), { component: children }));
+            }
+            return next;
+        });
+    }, [children]);
+    React.useEffect(() => {
+        // 初始化缓存
+        if (!cache.has(cacheKey)) {
+            setCache(prev => {
+                const next = new Map(prev);
+                next.set(cacheKey, {
+                    component: componentRef.current,
+                    status: 'active',
+                });
+                return next;
+            });
+        }
+        // 更新状态
+        setCache(prev => {
+            const next = new Map(prev);
+            prev.forEach((value, key) => {
+                next.set(key, Object.assign(Object.assign({}, value), { status: key === cacheKey ? 'active' : 'inactive' }));
+            });
+            return next;
+        });
+        // 清理函数
+        return () => {
+            // 这里我们不会在路由变化时删除缓存
+            // 只是将状态设置为 inactive
+            setCache(prev => {
+                const next = new Map(prev);
+                if (next.has(cacheKey)) {
+                    next.set(cacheKey, Object.assign(Object.assign({}, next.get(cacheKey)), { status: 'inactive' }));
+                }
+                return next;
+            });
+        };
+    }, [cacheKey, location.pathname]);
+    // 不直接渲染children，因为所有缓存的组件都在Provider中渲染
+    return null;
+};

package/esm/PullToRefresh.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const RemaxPullToRefresh: React.FC<any>;
-export default RemaxPullToRefresh;
+declare const RsmaxPullToRefresh: React.FC<any>;
+export default RsmaxPullToRefresh;

package/esm/PullToRefresh.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PullToRefresh from 'rmc-pull-to-refresh';
 import LoadingIcon from './LoadingIcon';
-const RemaxPullToRefresh = props => {
+const RsmaxPullToRefresh = props => {
     return (React.createElement(PullToRefresh, Object.assign({}, props, { getScrollContainer: () => {
             document.body;
         }, indicator: {
@@ -11,4 +11,4 @@ const RemaxPullToRefresh = props => {
             finish: React.createElement(LoadingIcon, null),
         } })));
 };
-export default RemaxPullToRefresh;
+export default RsmaxPullToRefresh;

package/esm/TabBar.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-import { History } from 'history';
-import { TabBarConfig } from './types';
-export declare function TabBar({ config, history }: {
+import type { TabBarConfig } from './types';
+export declare function TabBar({ config }: {
     config: TabBarConfig;
-    history: History;
 }): React.JSX.Element;

package/esm/TabBar.js

@@ -1,17 +1,13 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-export function TabBar({ config, history }) {
+import { Link, useLocation } from 'react-router-dom';
+export function TabBar({ config }) {
     var _a;
-    const [currentPath, setCurrentPath] = React.useState(history.location.pathname);
-    React.useEffect(() => {
-        setCurrentPath(history.location.pathname);
-        return history.listen(() => {
-            setCurrentPath(history.location.pathname);
-        });
-    }, []);
+    const location = useLocation();
+    const currentPath = location.pathname;
+    React.useEffect(() => { }, [currentPath]);
     const isActive = (url) => {
         if (!url.startsWith('/')) {
-            url = '/' + url;
+            url = `/${url}`;
         }
         return currentPath === url;
     };
@@ -22,9 +18,9 @@ function TabBarItem({ config, isActive, item }) {
     const icon = isActive ? item.activeImage || item.image : item.image;
     const textColor = (_a = config.textColor) !== null && _a !== void 0 ? _a : '#333';
     const selectedColor = (_b = config.selectedColor) !== null && _b !== void 0 ? _b : '#108ee9';
-    return (React.createElement(Link, { to: `/${item.url}`, className: "rsmax-tab-item" },
-        React.createElement("div", { className: "rsmax-tab-item-image", style: { backgroundImage: `url(${icon})` } }),
-        React.createElement("div", { className: "rsmax-tab-item-title", style: {
+    return (React.createElement(Link, { to: item.url.startsWith('/') ? item.url : `/${item.url}`, className: 'rsmax-tab-item' },
+        React.createElement("div", { className: 'rsmax-tab-item-image', style: { backgroundImage: `url(${icon})` } }),
+        React.createElement("div", { className: 'rsmax-tab-item-title', style: {
                 color: isActive ? selectedColor : textColor,
             } }, item.title)));
 }

package/esm/api.js

@@ -1,22 +1,26 @@
 import { RuntimeOptions } from '@rsmax/framework-shared';
 export function navigateTo(params) {
-    const history = RuntimeOptions.get('history');
-    history.push(params.url);
+    const navigate = RuntimeOptions.get('navigate');
+    navigate(params.url, {
+        replace: true,
+    });
     return Promise.resolve();
 }
 export function navigateBack(params) {
-    const history = RuntimeOptions.get('history');
-    history.go(-((params === null || params === void 0 ? void 0 : params.delta) || 1));
+    const navigate = RuntimeOptions.get('navigate');
+    navigate(-((params === null || params === void 0 ? void 0 : params.delta) || 1));
     return Promise.resolve();
 }
 export function redirectTo(params) {
-    const history = RuntimeOptions.get('history');
-    history.replace(params.url);
+    const navigate = RuntimeOptions.get('navigate');
+    navigate(params.url, {
+        replace: true,
+    });
     return Promise.resolve();
 }
 export function reLaunch(params) {
     window.location.href = params.url;
 }
 export function switchTab(params) {
-    navigateTo(params);
+    navigateTo(params).then();
 }

package/esm/bootstrap.d.ts

@@ -1,2 +1,2 @@
-import { BootstrapOptions } from './types';
+import type { BootstrapOptions } from './types';
 export default function bootstrap(options: BootstrapOptions): void;

package/esm/bootstrap.js

@@ -1,16 +1,11 @@
 import { createRoot } from 'react-dom/client';
 import hd from 'umi-hd';
-import { createHashHistory, createBrowserHistory } from 'history';
-import { RuntimeOptions } from '@rsmax/framework-shared';
 import createApp from './createApp';
 export default function bootstrap(options) {
     hd();
-    const { appConfig } = options;
-    const history = !appConfig.router || appConfig.router.type !== 'browser' ? createHashHistory() : createBrowserHistory();
-    RuntimeOptions.apply({ history, mpa: false });
     const container = document.getElementById('rsmax-app');
     if (!container)
         throw new Error('Failed to find the root element');
     const root = createRoot(container);
-    root.render(createApp(options, history));
+    root.render(createApp(options));
 }

package/esm/bootstrapMpa.js

@@ -1,8 +1,8 @@
+import { PluginDriver, RuntimeOptions } from '@rsmax/framework-shared';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import hd from 'umi-hd';
 import createAppConfig from './createAppConfig';
-import { PluginDriver, RuntimeOptions } from '@rsmax/framework-shared';
 import createPageConfig from './createPageConfig';
 const noop = () => {
     // ignore
@@ -41,11 +41,11 @@ export default function bootstrap(options) {
             if (url.startsWith('/'))
                 publicPath = location.pathname.replace(`/${page.route}.html`, '');
             const arr = url.split('?');
-            arr[0] = arr[0] + '.html';
+            arr[0] = `${arr[0]}.html`;
             return publicPath + arr.join('?');
         },
     };
-    RuntimeOptions.apply({ pluginDriver, history, mpa: true });
+    RuntimeOptions.apply({ pluginDriver, mpa: true });
     const App = createApp(options);
     const container = document.getElementById('rsmax-app');
     if (!container)

package/esm/createApp.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-import { History } from 'history';
-import { BootstrapOptions } from './types';
-export default function createApp(options: BootstrapOptions, history: History): React.JSX.Element;
+import type { BootstrapOptions } from './types';
+export default function createApp(options: BootstrapOptions): React.JSX.Element;

package/esm/createApp.js

@@ -1,38 +1,56 @@
-import React from 'react';
-import { RuntimeOptions, PluginDriver } from '@rsmax/framework-shared';
-import { CacheRoute, CacheSwitch } from '@remax/react-router-cache-route';
-import { Router, Route, Redirect, useLocation } from 'react-router-dom';
 import loadable from '@loadable/component';
+import { PluginDriver, RuntimeOptions } from '@rsmax/framework-shared';
+import React from 'react';
+import { BrowserRouter, HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import { KeepAlive, KeepAliveProvider } from './KeepAlive';
+import { TabBar } from './TabBar';
 import createAppConfig from './createAppConfig';
 import createPageConfig from './createPageConfig';
-import { TabBar } from './TabBar';
-export default function createApp(options, history) {
-    var _a, _b, _c;
+export default function createApp(options) {
+    var _a;
     const { async = true, appComponent, appConfig, pageComponents, pages, plugins = [] } = options;
     const AppConfig = createAppConfig(appComponent);
     const pluginDriver = new PluginDriver(plugins.map(plugin => plugin.default || plugin));
-    RuntimeOptions.apply({ pluginDriver });
     const pageComponentsHoc = pages.map((page, i) => {
-        const pageComponent = async
+        return async
             ? loadable(() => pageComponents[i]().then(({ default: c }) => createPageConfig(c, page.route)))
             : createPageConfig(pageComponents[i](), page.route);
-        return pageComponent;
     });
-    return (React.createElement(Router, { history: history },
-        React.createElement(AppConfig, null,
-            React.createElement(CacheSwitch, null,
-                React.createElement(Route, { exact: true, path: "/" },
-                    React.createElement(Redirect, { to: `/${(_a = pages[0]) === null || _a === void 0 ? void 0 : _a.route}` })),
-                pages.map((page, i) => {
-                    return (React.createElement(CacheRoute, { key: page.route, className: "rsmax-cached-router-wrapper", path: `/${page.route}`, exact: true }, (props) => {
-                        const pageComponent = pageComponentsHoc[i];
-                        return React.createElement(pageComponent, Object.assign(Object.assign({}, props), { pageConfig: Object.assign(Object.assign({}, appConfig.window), page.config), tabBar: appConfig.tabBar }));
-                    }));
-                }),
-                React.createElement(Route, null,
-                    React.createElement(Redirect, { to: `/${(_b = pages[0]) === null || _b === void 0 ? void 0 : _b.route}` }))),
-            ((_c = appConfig.tabBar) === null || _c === void 0 ? void 0 : _c.items) && appConfig.tabBar.items.length > 0 && (React.createElement(TabBar, { history: history, config: appConfig.tabBar })),
-            process.env.NODE_ENV === 'development' && React.createElement(LogLocation, null))));
+    const AppConfigElement = () => {
+        var _a, _b, _c;
+        const navigate = useNavigate();
+        React.useEffect(() => {
+            RuntimeOptions.apply({ pluginDriver, navigate, mpa: false });
+        }, [navigate]);
+        return (React.createElement(AppConfig, null,
+            React.createElement(KeepAliveProvider, null,
+                React.createElement(Routes, null,
+                    React.createElement(Route, { path: "/", element: React.createElement(Navigate, { to: `/${(_a = pages[0]) === null || _a === void 0 ? void 0 : _a.route}`, replace: true }) }),
+                    pages.map((page, i) => {
+                        // 合并页面配置
+                        const pageConfig = Object.assign(Object.assign({}, appConfig.window), page.config);
+                        // 默认所有页面都开启keepAlive
+                        const pageElement = React.createElement(pageComponentsHoc[i], {
+                            pageConfig,
+                            tabBar: appConfig.tabBar,
+                        });
+                        return (React.createElement(Route, { key: page.route, path: `/${page.route}`, element: React.createElement(KeepAlive, { cacheKey: `/${page.route}` }, pageElement) }));
+                    }),
+                    React.createElement(Route, { path: "*", element: 
+                        /*找不到路由时重定向到首页*/
+                        React.createElement(Navigate, { to: `/${(_b = pages[0]) === null || _b === void 0 ? void 0 : _b.route}`, replace: true }) })),
+                ((_c = appConfig.tabBar) === null || _c === void 0 ? void 0 : _c.items) && appConfig.tabBar.items.length > 0 && React.createElement(TabBar, { config: appConfig.tabBar }),
+                process.env.NODE_ENV === 'development' && React.createElement(LogLocation, null))));
+    };
+    if (((_a = options.appConfig.router) === null || _a === void 0 ? void 0 : _a.type) === 'browser') {
+        return (React.createElement(BrowserRouter, null,
+            React.createElement(AppConfigElement, null)));
+    }
+    return (React.createElement(HashRouter, { future: {
+            v7_startTransition: true,
+            v7_relativeSplatPath: true,
+        } },
+        React.createElement(AppConfigElement, null)));
 }
 function LogLocation() {
     const location = useLocation();

package/esm/createAppConfig.js

@@ -1,6 +1,6 @@
+import { AppInstanceContext, AppLifecycle, callbackName, isClassComponent } from '@rsmax/framework-shared';
 import React from 'react';
 import { ForwardRef } from 'react-is';
-import { AppInstanceContext, AppLifecycle, callbackName, isClassComponent } from '@rsmax/framework-shared';
 class DefaultAppComponent extends React.Component {
     render() {
         return React.createElement(React.Fragment, this.props);
@@ -11,6 +11,7 @@ export default function createAppConfig(App) {
         const config = {
             _instance: React.createRef(),
             callLifecycle(lifecycle, ...args) {
+                var _a;
                 const callbacks = AppInstanceContext.lifecycleCallback[lifecycle] || [];
                 let result;
                 callbacks.forEach((callback) => {
@@ -20,7 +21,7 @@ export default function createAppConfig(App) {
                     return result;
                 }
                 const callback = callbackName(lifecycle);
-                if (this._instance.current && this._instance.current[callback]) {
+                if ((_a = this._instance.current) === null || _a === void 0 ? void 0 : _a[callback]) {
                     return this._instance.current[callback](...args);
                 }
             },

package/esm/createPageConfig.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TabBarConfig, PageConfig } from './types';
+import type { PageConfig, TabBarConfig } from './types';
 interface PageConfigProps {
     tabBar: TabBarConfig;
     pageConfig: PageConfig;

package/esm/createPageConfig.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import { Lifecycle, callbackName, createPageWrapper } from '@rsmax/framework-shared';
 import qs from 'qs';
-import { createPageWrapper, Lifecycle, callbackName } from '@rsmax/framework-shared';
+import React from 'react';
 import PullToRefresh from './PullToRefresh';
 const DEFAULT_REACH_BOTTOM_DISTANCE = 50;
 export default function createPageConfig(Page, name) {
@@ -15,6 +15,7 @@ export default function createPageConfig(Page, name) {
             };
         },
         callLifecycle(lifeCycle, ...args) {
+            var _a;
             const callbacks = this.lifeCycleCallback[lifeCycle] || [];
             let result;
             callbacks.forEach((callback) => {
@@ -24,7 +25,7 @@ export default function createPageConfig(Page, name) {
                 return result;
             }
             const callback = callbackName(lifeCycle);
-            if (this.wrapperRef.current && this.wrapperRef.current[callback]) {
+            if ((_a = this.wrapperRef.current) === null || _a === void 0 ? void 0 : _a[callback]) {
                 return this.wrapperRef.current[callback](...args);
             }
         },
@@ -32,6 +33,7 @@ export default function createPageConfig(Page, name) {
     const PageWrapper = createPageWrapper(Page, name);
     return class PageConfig extends React.Component {
         constructor(props) {
+            var _a, _b;
             super(props);
             this.state = {
                 refreshing: true,
@@ -96,8 +98,8 @@ export default function createPageConfig(Page, name) {
                 }
                 this.isReachBottom = isCurrentReachBottom;
             };
-            props.cacheLifecycles.didCache(this.componentDidCache);
-            props.cacheLifecycles.didRecover(this.componentDidRecover);
+            (_a = props.cacheLifecycles) === null || _a === void 0 ? void 0 : _a.didCache(this.componentDidCache);
+            (_b = props.cacheLifecycles) === null || _b === void 0 ? void 0 : _b.didRecover(this.componentDidRecover);
         }
         componentDidMount() {
             this.setTitle();
@@ -114,7 +116,7 @@ export default function createPageConfig(Page, name) {
             const { refreshing } = this.state;
             const hasTabBar = !!tabBar;
             const className = `rsmax-page ${hasTabBar ? 'with-tab-bar' : ''}`;
-            const query = qs.parse(location.search, { ignoreQueryPrefix: true });
+            const query = qs.parse(location === null || location === void 0 ? void 0 : location.search, { ignoreQueryPrefix: true });
             if (this.isPullDownRefreshEnabled()) {
                 return (React.createElement(PullToRefresh, { onRefresh: this.handleRefresh, refreshing: refreshing, distanceToRefresh: 50 },
                     React.createElement("div", { className: className }, React.createElement(PageWrapper, {

package/esm/hooks/useQuery.js

@@ -1,6 +1,6 @@
-import { useLocation } from 'react-router-dom';
-import qs from 'qs';
 import { RuntimeOptions } from '@rsmax/framework-shared';
+import qs from 'qs';
+import { useLocation } from 'react-router-dom';
 export default function useQuery() {
     const location = RuntimeOptions.get('mpa') ? window.location : useLocation();
     return qs.parse(location.search, { ignoreQueryPrefix: true });

package/esm/types/config.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export interface Page {
     route: string;
     config: PageConfig;