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