How to use NavPathStack to implement page routing?

Read the original article：How to use NavPathStack to implement page routing?

Q: How to use NavPathStack to implement page routing?

Ans: In API version 9, the Navigation component must be used together with the NavRouter component for page routing. Since API version 10, whenever possible, use NavPathStack instead to implement page routing.

This example demonstrates how to use NavPathStack in Navigation.

@Entry
@Component
struct Index {
  pathStack: NavPathStack = new NavPathStack();
  param: string = "Hello World"

  @Builder
  pageMap() {
    PageOne()
  }

  build() {
    Navigation(this.pathStack) {
      Button("to Page One").margin(20).onClick(() => {
        this.pathStack.pushPath({
          name: "pageOne",
          param: this.param
        });
      })
    }.navDestination(this.pageMap)
    .title("Home Page")
  }
}

@Component
struct PageOne {
  pathStack: NavPathStack = new NavPathStack();
  param: string = "";

  build() {
    NavDestination() {
      Row() {
        Text("Param Message:")
          .fontSize(20)
          .margin({ top: 24, right: 8 })
          .fontWeight(FontWeight.Bold)

        Text(this.param)
          .margin({ top: 24 })
          .fontSize(20)
      }
    }.title("Page One")
    .onReady((context: NavDestinationContext) => {
      this.param = context.pathInfo.param as string;
    })
  }
}

Written by Emine Inan