1# NavRouter
2
3The **NavRouter** component provides default processing logic for responding to clicks, eliminating the need for manual logic definition.
4
5> **NOTE**
6>
7> This component is deprecated since API version 13. You are advised to use [NavPathStack](ts-basic-components-navigation.md#navpathstack10) in conjunction with the **navDestination** attribute for page routing.
8>
9> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
10
11## Child Components
12
13This component must contain two child components, the second of which must be [NavDestination](ts-basic-components-navdestination.md).
14
15> **NOTE**
16>
17>
18> 1. If there is only one child component, the navigation to the **NavDestination** component does not work.
19> 2. If there is only the **NavDestination** child component, the navigation does not work.
20> 3. If there are more than two child components, the excess child components are not displayed.
21> 4. If the second child component is not **NavDestination**, the navigation does not work.
22
23## APIs
24
25### NavRouter
26
27NavRouter()
28
29**Atomic service API**: This API can be used in atomic services since API version 11.
30
31**System capability**: SystemCapability.ArkUI.ArkUI.Full
32
33### NavRouter<sup>10+</sup>
34
35NavRouter(value: RouteInfo)
36
37Provides route information so that clicking the **NavRouter** component redirects the user to the specified navigation destination page.
38
39**Atomic service API**: This API can be used in atomic services since API version 11.
40
41**System capability**: SystemCapability.ArkUI.ArkUI.Full
42
43**Parameters**
44
45| Name    | Type                               | Mandatory  | Description         |
46| ------- | ----------------------------------- | ---- | ------------- |
47| value   | [RouteInfo](#routeinfo10) | Yes   | Route information.|
48
49## Attributes
50
51In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
52
53### mode<sup>10+</sup>
54
55mode(mode: NavRouteMode)
56
57Sets the route mode used for redirecting the user from the **NavRouter** component to the specified navigation destination page.
58
59**Atomic service API**: This API can be used in atomic services since API version 11.
60
61**System capability**: SystemCapability.ArkUI.ArkUI.Full
62
63**Parameters**
64
65| Name                          | Type                                    | Mandatory                                  | Description                                      |
66| ----------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
67| mode                  | [NavRouteMode](#navroutemode)                                  | Yes                                | Route mode used for redirection.<br>Default value: **NavRouteMode.PUSH_WITH_RECREATE**|
68
69## RouteInfo<sup>10+</sup>
70
71**Atomic service API**: This API can be used in atomic services since API version 11.
72
73**System capability**: SystemCapability.ArkUI.ArkUI.Full
74
75| Name                | Type                                                    | Mandatory| Description                                                        |
76| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
77| name             | string            | Yes  | Name of the navigation destination page to be redirected to.|
78| param             | unknown            | No  | Parameter transferred during redirection.|
79
80## NavRouteMode
81
82**Atomic service API**: This API can be used in atomic services since API version 11.
83
84**System capability**: SystemCapability.ArkUI.ArkUI.Full
85
86| Name   | Description            |
87| ----- | ---------------- |
88| PUSH_WITH_RECREATE | The new navigation destination page replaces the current one. The current page is destroyed, but the information about this page is retained in the navigation stack.|
89| PUSH   | The new navigation destination page overwrites the current one. The current page is not destroyed, and the information about this page is retained in the navigation stack.|
90| REPLACE   | The new navigation destination page replaces the current one. The current page is destroyed, and the information about this page is removed from the navigation stack.|
91
92## Events
93
94### onStateChange
95
96onStateChange(callback: (isActivated: boolean) => void)
97
98Called when the component activation status changes. **onStateChange(true)** is called when the **NavRouter** component is activated and its **NavDestination** child component is loaded. **onStateChange(false)** is called when the **NavDestination** child component is not displayed.
99
100**Atomic service API**: This API can be used in atomic services since API version 11.
101
102**System capability**: SystemCapability.ArkUI.ArkUI.Full
103
104**Parameters**
105
106| Name     | Type   | Mandatory| Description                                   |
107| ----------- | ------- | ---- | --------------------------------------- |
108| isActivated | boolean | Yes  | Component activation status. The value **true** means that component is activated, and **false** means the opposite.|
109
110## Example
111
112```ts
113// xxx.ets
114@Entry
115@Component
116struct NavRouterExample {
117  @State isActiveWLAN: boolean = false
118  @State isActiveBluetooth: boolean = false
119
120  build() {
121    Navigation() {
122      NavRouter() {
123        Row() {
124          Row()
125            .width(30)
126            .height(30)
127            .borderRadius(30)
128            .margin({ left: 3, right: 10 })
129            .backgroundColor(Color.Pink)
130          Text(`WLAN`)
131            .fontSize(22)
132            .fontWeight(500)
133            .textAlign(TextAlign.Center)
134        }
135        .width('90%')
136        .height(60)
137
138        NavDestination() {
139          Flex({ direction: FlexDirection.Row }) {
140            Text('No WLAN available.').fontSize(30).padding({ left: 15 })
141          }
142        }.title("WLAN")
143      }
144      .margin({ top: 10, bottom: 10 })
145      .backgroundColor(this.isActiveWLAN ? '#ccc' : '#fff')
146      .borderRadius(20)
147      .mode(NavRouteMode.PUSH_WITH_RECREATE)
148      .onStateChange((isActivated: boolean) => {
149        this.isActiveWLAN = isActivated
150      })
151
152      NavRouter() {
153        Row() {
154          Row()
155            .width(30)
156            .height(30)
157            .borderRadius(30)
158            .margin({ left: 3, right: 10 })
159            .backgroundColor(Color.Pink)
160          Text(`Bluetooth`)
161            .fontSize(22)
162            .fontWeight(500)
163            .textAlign(TextAlign.Center)
164        }
165        .width('90%')
166        .height(60)
167
168        NavDestination() {
169          Flex({ direction: FlexDirection.Row }) {
170            Text('No Bluetooth device available.').fontSize(30).padding({ left: 15 })
171          }
172        }.title("Bluetooth")
173      }
174      .margin({ top: 10, bottom: 10 })
175      .backgroundColor(this.isActiveBluetooth ? '#ccc' : '#fff')
176      .borderRadius(20)
177      .mode(NavRouteMode.REPLACE)
178      .onStateChange((isActivated: boolean) => {
179        this.isActiveBluetooth = isActivated
180      })
181    }
182    .height('100%')
183    .width('100%')
184    .title('Settings')
185    .backgroundColor("#F2F3F5")
186    .titleMode(NavigationTitleMode.Free)
187    .mode(NavigationMode.Auto)
188  }
189}
190```
191
192![NavRouter](./figures/NavRouter.gif)
193