CtrlK
BlogDocsLog inGet started
Tessl Logo

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

navigation-apis.mddocs/

Navigation APIs

Mini-program compatible navigation system with promise-based callbacks, page stack management, and URL processing for relative paths and custom routes.

Capabilities

navigateTo

Navigate to a new page while keeping the current page in the page stack. Supports event channels for page communication.

/**
 * Navigate to a new page, keeping current page in stack
 * @param option - Navigation options with URL and callbacks
 * @returns Promise resolving to navigation result with event channel
 */
function navigateTo(option: Taro.navigateTo.Option): Promise<TaroGeneral.CallbackResult>;

interface NavigateToOption extends Base {
  /** Target page URL (relative or absolute) */
  url: string;
  /** Events to pass to target page via event channel */
  events?: Record<string, any>;
}

Usage Examples:

import { navigateTo } from "@tarojs/router";

// Basic navigation
await navigateTo({
  url: "/profile?id=123",
  success: (res) => {
    console.log("Navigation successful", res);
    // res.eventChannel available for page communication
  },
  fail: (err) => console.error("Navigation failed", err),
  complete: () => console.log("Navigation completed")
});

// Navigation with event channel
await navigateTo({
  url: "/detail",
  events: {
    onDataUpdate: (data) => console.log("Received data", data),
    onError: (error) => console.error("Page error", error)
  }
});

// Relative path navigation
await navigateTo({
  url: "./subfolder/page" // Resolves relative to current page
});

redirectTo

Redirect to a new page, replacing the current page in the stack. Current page will be unloaded.

/**
 * Redirect to a new page, replacing current page
 * @param option - Navigation options with URL and callbacks
 * @returns Promise resolving to navigation result
 */
function redirectTo(option: Taro.redirectTo.Option): Promise<TaroGeneral.CallbackResult>;

Usage Example:

import { redirectTo } from "@tarojs/router";

await redirectTo({
  url: "/login",
  success: () => console.log("Redirected to login"),
  fail: (err) => console.error("Redirect failed", err)
});

navigateBack

Navigate back in the page stack by a specified delta (number of pages).

/**
 * Navigate back in the page stack
 * @param option - Options with delta (defaults to {delta: 1})
 * @returns Promise resolving to navigation result
 */
function navigateBack(option?: Taro.navigateBack.Option): Promise<TaroGeneral.CallbackResult>;

interface NavigateBackOption extends Base {
  /** Number of pages to go back (minimum 1) */
  delta: number;
}

Usage Examples:

import { navigateBack } from "@tarojs/router";

// Go back one page (default)
await navigateBack();

// Go back multiple pages
await navigateBack({
  delta: 2,
  success: () => console.log("Navigated back 2 pages"),
  fail: (err) => console.error("Navigate back failed", err)
});

// Go back to beginning of stack
await navigateBack({
  delta: 999 // Will go back to first page if stack is smaller
});

switchTab

Switch to a tabbar page. If the target page is already in the tab cache, it will be shown instead of reloaded.

/**
 * Switch to a tabbar page
 * @param option - Tab switch options with URL and callbacks
 * @returns Promise resolving to navigation result
 */
function switchTab(option: Taro.switchTab.Option): Promise<TaroGeneral.CallbackResult>;

Usage Example:

import { switchTab } from "@tarojs/router";

await switchTab({
  url: "/home", // Must be a tabbar page
  success: () => console.log("Switched to home tab"),
  fail: (err) => console.error("Tab switch failed", err)
});

reLaunch

Relaunch the app with a new page, clearing the entire page stack.

/**
 * Relaunch app with a new page, clearing all page stack
 * @param option - Relaunch options with URL and callbacks
 * @returns Promise resolving to navigation result
 */
function reLaunch(option: Taro.reLaunch.Option): Promise<TaroGeneral.CallbackResult>;

Usage Example:

import { reLaunch } from "@tarojs/router";

await reLaunch({
  url: "/welcome",
  success: () => console.log("App relaunched"),
  fail: (err) => console.error("Relaunch failed", err)
});

getCurrentPages

Get the current page stack as an array of page instances. Not supported in multi-page mode.

/**
 * Get current page stack (not supported in multi-page mode)
 * @returns Array of current page instances with route information
 */
function getCurrentPages(): Taro.Page[];

Usage Example:

import { getCurrentPages } from "@tarojs/router";

const pages = getCurrentPages();
console.log("Current page stack:", pages);
console.log("Current page:", pages[pages.length - 1]);
console.log("Total pages in stack:", pages.length);

// Each page object contains:
// - route: string (page path without query parameters)
// - path: string (full path with query parameters)
// - options: any (page parameters)

Callback Interface

interface Base {
  /** Success callback function */
  success?: (...args: any[]) => void;
  /** Failure callback function */
  fail?: (...args: any[]) => void;
  /** Completion callback function (called regardless of success/failure) */
  complete?: (...args: any[]) => void;
}

interface Option extends Base {
  /** Target page URL (can be relative or absolute) */
  url: string;
}

interface NavigateOption extends Base {
  /** Target page URL */
  url: string;
  /** Events to pass to target page via event channel */
  events?: Record<string, any>;
}

URL Processing Features

  • Relative Path Support: Handles ./ and ../ path navigation relative to current page
  • Custom Route Aliases: Processes custom route mappings defined in router configuration
  • Basename Handling: Automatically prepends configured basename to paths
  • Query Parameter Support: Preserves URL query parameters and hash fragments
  • Leading Slash Normalization: Ensures all paths start with / for consistency

Install with Tessl CLI

npx tessl i tessl/npm-tarojs--router

docs

application-mounting.md

history-management.md

index.md

navigation-apis.md

router-creation.md

utility-functions.md

tile.json