tessl/npm-tarojs--router

A routing system for H5 (web) applications in the Taro cross-platform framework, providing compatibility with mini-program routing specifications.

—

Pending

Overview

Eval results

Files

Router Creation

Name: tessl/npm-tarojs--router
Author: tessl

Core router creation functions for SPA and MPA applications with comprehensive page lifecycle management, universal routing, and page stack management.

Capabilities

createRouter

Creates a single-page application (SPA) router with universal routing support, page stack management, and full lifecycle integration.

/**
 * Creates a single-page application (SPA) router
 * @param history - Browser/hash history instance for navigation
 * @param app - Application component instance with lifecycle methods
 * @param config - Router configuration for SPA mode
 * @param framework - Framework type ('react', 'vue', 'solid', 'preact')
 * @returns Function to unsubscribe from history listener
 */
function createRouter(
  history: History,
  app: AppInstance,
  config: SpaRouterConfig,
  framework?: string
): () => void;

Usage Example:

import { createRouter, createHashHistory } from "@tarojs/router";

const history = createHashHistory();
const app = {
  onLaunch: (options) => console.log("App launched", options),
  onShow: (options) => console.log("App shown", options),
  onHide: () => console.log("App hidden"),
  onError: (error) => console.error("App error", error)
};

const config = {
  routes: [
    { 
      path: "/home", 
      load: () => import("./pages/home"),
      navigationBarTitleText: "Home" 
    },
    { 
      path: "/profile", 
      load: () => import("./pages/profile"),
      navigationBarTitleText: "Profile" 
    }
  ],
  router: {
    mode: "hash",
    basename: "/",
    pathname: "/home"
  },
  pages: ["/home", "/profile"],
  window: {
    navigationBarBackgroundColor: "#000000",
    navigationBarTextStyle: "white"
  }
};

const unsubscribe = createRouter(history, app, config, "react");

// Clean up when needed
// unsubscribe();

createMultiRouter

Creates a multi-page application (MPA) router for applications that use traditional page navigation patterns.

/**
 * Creates a multi-page application (MPA) router
 * @param history - Browser/hash history instance (custom MPA implementation)
 * @param app - Application component instance with lifecycle methods
 * @param config - Router configuration for MPA mode
 * @param framework - Framework type ('react', 'vue', 'solid', 'preact')
 * @returns Promise that resolves when router is initialized
 */
function createMultiRouter(
  history: History,
  app: AppInstance,
  config: MpaRouterConfig,
  framework?: string
): Promise<void>;

Usage Example:

import { createMultiRouter, createMpaHistory } from "@tarojs/router";

const history = createMpaHistory();
const app = {
  onLaunch: (options) => console.log("App launched", options),
  onShow: (options) => console.log("App shown", options),
  onHide: () => console.log("App hidden")
};

const config = {
  route: {
    path: "/current-page",
    load: () => import("./pages/current"),
    navigationBarTitleText: "Current Page"
  },
  pageName: "/current-page",
  router: {
    mode: "multi",
    basename: "/",
    pathname: "/current-page"
  },
  window: {
    navigationBarBackgroundColor: "#ffffff",
    navigationBarTextStyle: "black"
  }
};

await createMultiRouter(history, app, config, "react");

App Mount Functions

Functions to mount the application with or without tabbar support.

/**
 * Mounts the application without tabbar support
 * @param config - Router configuration
 * @param history - History instance (unused parameter)
 * @param appId - App element ID, defaults to 'app'
 */
function handleAppMount(
  config: SpaRouterConfig | MpaRouterConfig,
  history: History,
  appId?: string
): void;

/**
 * Mounts the application with tabbar container support
 * @param config - Router configuration
 * @param history - History instance for tabbar navigation
 * @param appId - App element ID, defaults to 'app'
 */
function handleAppMountWithTabbar(
  config: SpaRouterConfig | MpaRouterConfig,
  history: History,
  appId?: string
): void;

Usage Examples:

import { handleAppMount, handleAppMountWithTabbar } from "@tarojs/router";

// Mount without tabbar
handleAppMount(config, history, "my-app");

// Mount with tabbar (for apps with bottom navigation)
handleAppMountWithTabbar(config, history, "my-app");

Configuration Types

interface SpaRouterConfig extends AppConfig {
  /** Array of route configurations for SPA routing */
  routes: Route[];
  /** Router configuration object */
  router: Router;
  /** Optional pull-down refresh component */
  PullDownRefresh?: any;
}

interface MpaRouterConfig extends AppConfig {
  /** Single route configuration for current page */
  route: Route;
  /** Current page name/path */
  pageName: string;
  /** Router configuration object */
  router: Router;
  /** Optional pull-down refresh component */
  PullDownRefresh?: any;
}

interface Route extends PageConfig {
  /** Route path pattern */
  path?: string;
  /** Async function to load page component */
  load?: () => Promise<any>;
}

interface Router {
  /** Router mode: 'hash', 'browser', or 'multi' */
  mode: IH5RouterConfig['mode'];
  /** Base path for all routes */
  basename: string;
  /** Custom route aliases mapping */
  customRoutes?: Record<string, string | string[]>;
  /** Current pathname */
  pathname: string;
  /** Force a specific path (overrides current pathname) */
  forcePath?: string;
  /** Enable enhanced animation support (requires :has() selector support) */
  enhanceAnimation?: boolean;
}

Install with Tessl CLI