Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Router<Ttarget>

Router Core Implemantation

description

Router implementation creates a thin layer between view and application layers to handle view changes and to create loosely coupled and resuable routing logic.

example
const router = Router.of({
  path: "/",
  to: "/pages/page2",
  isRoot: true,
  routes: [
      Route.of({
          path: "/pages/page2",
          build: (match, state) => {
              let Page2 = require("pages/page2");
              return new Page2();
          }
      }),
      StackRouter.of({
          path: "/stack",
          to: "/stack/path1",
          headerBarParams: () => { ios: { translucent: true } },
          routes: [
              Route.of({
                  path: "/stack/path1",
                  build: (match, state, router) => new Page1(state.data, router)
              }),
              Route.of({
                  path: "/stack/path2",
                  routeShouldMatch: (route, nextState) => {
                      if (!nextState.routeData.applied) {
                          // blocks route changing
                          return false;
                      }
                      return false;
                  },
                  build: (router, route) => {
                      const { routeData, view } = route.getState();
                      return new Page2(routeData, router);
                  }
              })
          ]
      }),
      BottomTabBarRouter.of({
          path: "/bottom",
          to: "/bottom/stack2/path1",
          tabbarParams: () => ({
              ios: { translucent: false },
              itemColor: Color.RED,
              unselectedItemColor: Color.YELLOW,
              backgroundColor: Color.BLUE
          }),
          items: () => [{ title: "page1" }, { title: "page2" }, { title: "page3" }],
          routes: [
              StackRouter.of({
                  path: "/bottom/stack",
                  to: "/bottom/stack/path1",
                  headerBarParams: () => { ios: { translucent: false } },
                  routes: [
                      Route.of({
                          path: "/bottom/stack/path1",
                          build: (router, route) => new Page1(route.getState().routeData, router, "/stack/path2")
                      }),
                      Route.of({
                          path: "/bottom/stack/path2",
                          build: (router, route) => {
                              const { routeData, view } = route.getState();

                              return new Page2(routeData, router, "/bottom/stack2/path1");
                          }
                      })
                  ]
              }),
              StackRouter.of({
                  path: "/bottom/stack2",
                  to: "/bottom/stack2/path1",
                  headerBarParams: () => { ios: { translucent: false } },
                  routes: [
                      Route.of({
                          path: "/bottom/stack2/path1",
                          build: (router, route) => new Page1(route.getState().routeData, router, "/bottom/stack/path2")
                      }),
                      Route.of({
                          path: "/bottom/stack2/path2",
                          build: (router, route) => {
                              return new Page2(route.getState().routeData, router);
                          }
                      })
                  ]
              })
          ]
      })
  ]
});
example
// Homeroute setting

//...
     StackRouter.of({
          path: "/stack",
          to: "/stack/path1",
          homeRoute: 0, // it's first push if target is path diffrent.
          headerBarParams: () => { ios: { translucent: true } },
          routes: [
              Route.of({
                  path: "/stack/path1",
                  build: (match, state, router) => new Page1(state.data, router)
              }),
              Route.of({
                  path: "/stack/path2",
                  routeShouldMatch: (route, nextState) => {
                      if (!nextState.routeData.applied) {
                          // blocks route changing
                          return false;
                      }
                      return false;
                  },
                  build: (router, route) => {
                      const { routeData, view } = route.getState();
                      return new Page2(routeData, router);
                  }
              })
          ]
      })
since

1.0.0

Type parameters

  • Ttarget = unknown

Hierarchy

Index

Properties

Accessors

Methods

Constructors

Events

Properties

map

map: MapFunction<Route<any>>

Static currentRouter

currentRouter: Router<any> | NativeStackRouter<PageImpl>

Static blocker

blocker: null | ((router: Router<unknown>, path: null | string, routeData: null | object, action: HistoryActionType, doneFn: Function) => void)

Optional dispatch

dispatch?: (location: Location, action: HistoryActionType, target: Router<Ttarget>, fromRouter?: boolean) => void

Type declaration

    • (location: Location, action: HistoryActionType, target: Router<Ttarget>, fromRouter?: boolean): void

    • Parameters

      • location: Location
      • action: HistoryActionType
      • target: Router<Ttarget>
      • Optional fromRouter: boolean

      Returns void

emitter

emitter: { emitRouterDidEnter?: RouteLifeCycleHandler<any>; emitRouterDidExit?: (router: Router<unknown>, action: HistoryActionType) => void; emitRouteWillEnter?: any }

Type declaration

  • Optional emitRouterDidEnter?: RouteLifeCycleHandler<any>
  • Optional emitRouterDidExit?: (router: Router<unknown>, action: HistoryActionType) => void
      • (router: Router<unknown>, action: HistoryActionType): void

      • Parameters

        • router: Router<unknown>
        • action: HistoryActionType

        Returns void

  • emitRouteWillEnter?:function
    • emitRouteWillEnter(router: Router<unknown>, route: Route<unknown>, view?: any): void

Accessors

state

  • get state(): RouteState<any>

routePath

  • get routePath(): string | (() => string)

  • Helper method to return excat path of the component

    since

    1.0.0

    Returns string | (() => string)

renderer

  • get renderer(): undefined | default

matches

  • get matches(): MatchReturn

historyController

  • get historyController(): undefined | HistoryController

Methods

setState

  • setState(state: Partial<RouteState<any>>): void

getState

  • getState(): RouteState<any>

toJSON

  • toJSON(): { type: string; match: any; routeData: any; routingState: undefined | object; path: string; routes: Route<unknown>[]; state: RouteState<any> & { view: any } }

  • Simple Object representation of the route

    since

    1.0.0

    Returns { type: string; match: any; routeData: any; routingState: undefined | object; path: string; routes: Route<unknown>[]; state: RouteState<any> & { view: any } }

    • type: string
    • match: any
    • routeData: any
    • routingState: undefined | object
    • path: string
    • routes: Route<unknown>[]
    • state: RouteState<any> & { view: any }

toString

  • toString(): string

setUrl

  • setUrl(url: string): void

clearUrl

  • clearUrl(): void

clearDirty

  • clearDirty(): void

getUrl

  • getUrl(): null | string

getRedirectto

  • getRedirectto(): undefined | string | (() => string)

build

  • build(router: Router<any>): any

  • Builds a route's view. This method is called whenever router is routing into that path. There are some exceptions:

    • going into a tab, which the tab is created before
    • for iOS, goingBack via gesture or headerBar back
    since

    1.0.0

    Parameters

    • router: Router<any>

      Not the root router, the router which the route belongs to.

    Returns any

    view = null - If the route has been built once, the previous view (page) is given. Otherwise it is null. If view is not null, returning the view back makes it singleton.

Static getGlobalRouter

  • getGlobalRouter(): HistoryController

Static getHistoryStack

  • getHistoryStack(): any[]

Static getLastHistory

  • getLastHistory(): any

Static getlocationHistoryByIndex

  • getlocationHistoryByIndex(index: number): any

Static getHistoryByIndex

  • getHistoryByIndex(index: number): any

Static of

  • of<Ttarget>(props: RouterParams<Ttarget>): Router<Ttarget>

  • Factory method to create a new Router instance

    Type parameters

    • Ttarget = unknown

    Parameters

    • props: RouterParams<Ttarget>

    Returns Router<Ttarget>

Static createBlocker

  • createBlocker(fn: Function): (router: Router<unknown>, path: null | string, routeData: null | object, action: HistoryActionType, doneFn: Function) => void

  • Parameters

    • fn: Function

    Returns (router: Router<unknown>, path: null | string, routeData: null | object, action: HistoryActionType, doneFn: Function) => void

      • (router: Router<unknown>, path: null | string, routeData: null | object, action: HistoryActionType, doneFn: Function): void

      • Parameters

        • router: Router<unknown>
        • path: null | string
        • routeData: null | object
        • action: HistoryActionType
        • doneFn: Function

        Returns void

Static getActiveRouter

  • getActiveRouter(): null | Router<unknown>

hasPath

  • hasPath(): boolean

matchPath

  • matchPath(url: string): undefined | null | string | { path: string; url: any; isExact: boolean; params: any }

  • Checks if the specified url match to the route path

    Parameters

    • url: string

    Returns undefined | null | string | { path: string; url: any; isExact: boolean; params: any }

getUrlPath

  • getUrlPath(): string

getPath

  • getPath(): RoutePath

pushHomeRouteBefore

  • pushHomeRouteBefore(path: string): void

findChild

  • findChild(fn: (value: Route<unknown> | Router<unknown>, index: number, obj: (Route<unknown> | Router<unknown>)[]) => unknown): undefined | Route<unknown>

historyPreventDefault

  • historyPreventDefault(): void

pushAndBack

  • pushAndBack(url: string, routeData: any): void

hasHome

  • hasHome(): boolean

getCurrentUrl

  • getCurrentUrl(): undefined | string

canGoBack

  • canGoBack(n?: number): undefined | boolean

  • it tests that Whether router can go back as n

    example
    router.canGoBack(-3) ? router.goBackto(-3) : // if not, do anything else
    since

    1.1.0

    Parameters

    • Optional n: number

      Amount of back as negative value return {boolean}

    Returns undefined | boolean

listen

  • listen(fn: HistoryListenHandler): () => boolean

  • Adds eventlisteners to listen history changes

    example
    const unlisten = router.listen((location, action) => {
        console.log(`new route location: ${location.url} action : ${action}`);
    });
    since

    1.0.0

    Parameters

    • fn: HistoryListenHandler

    Returns () => boolean

      • (): boolean

      • Returns boolean

addRouteBlocker

  • addRouteBlocker(fn: RouteBlockHandler): () => void

  • Adds route block handler to history. When history is changed in anywhere then the handler intercepts before history is changed.

    example
    const unload = router.addRouteBlocker((path, routeData, action, ok) => {
    alert({
     message: "Would you like to answer?",
     title: "Question", //optional
     buttons: [{
     text: "Yes",
         type: AlertView.Android.ButtonType.POSITIVE,
         onClick: function() {
           ok(true);
         }
       },
       {
         text: "No",
         type: AlertView.Android.ButtonType.NEGATIVE,
         onClick: function() {
           ok(false);
         }
       }
     ]
     });
    });
    since

    1.0.0

    Parameters

    • fn: RouteBlockHandler

    Returns () => void

      • (): void

      • Returns void

getStore

  • getStore(): { saveRoute: any; setState: any; hasRoute: any; findRoute: any; toString: any }

onExit

  • onExit(action: HistoryActionType): void

  • Emits the router is deactivated.

    since

    1.0.0

    example
    Router.of({
     routerDidExit: (router, action) => {
       ...
     }
    })
    emits

    routerDidExit

    Parameters

    • action: HistoryActionType

    Returns void

isAnimated

  • isAnimated(): any

push

  • push(path: string, routeData?: {}, animated?: boolean): Router<Ttarget>

  • Pushes new history entry with specified path

    since

    1.0.0

    Parameters

    • path: string

      Path or matches of the route

    • routeData: {} = {}
      • animated: boolean = true

      Returns Router<Ttarget>

    isValidPath

    • isValidPath(path: string): boolean

    • Checks if the specified path is valid or not

      since

      1.0.0

      Parameters

      • path: string

      Returns boolean

    goBack

    • goBack(url?: string | Location, animated?: boolean): undefined | Router<Ttarget>

    • Rewinds one step the history

      since

      1.0.0

      Parameters

      • Optional url: string | Location

        This is an experimental feature. If you use this feature you should use for same StackRouter stack.

      • animated: boolean = true

      Returns undefined | Router<Ttarget>

    getLocation

    • getLocation(): undefined | Location

    getHistoryasArray

    • getHistoryasArray(): string[]

    dispose

    • dispose(): void

    Constructors

    constructor

    • new Router<Ttarget>(params?: RouterParams<Ttarget>): Router<Ttarget>

    Events

    routeDidEnter

    • routeDidEnter(route: Route<Ttarget>): void

    • Handles route is matched and displayed

      example
      Route.of({
       routeDidEnter: (router, route) => {
         //...
       }
      })
      emits

      routeDidEnter

      Parameters

      Returns void

    routeDidExit

    • routeDidExit(parent: Route<Ttarget>): void

    • Handles that route is removed by router

      example
      Route.of({
       routeDidExit: (router, route) => {
         //...
       }
      })
      since

      1.0.0

      emits

      routeDidExit

      Parameters

      Returns void

    Generated using TypeDoc