1# Navigator
2
3The **Navigator** component provides redirection.
4
5> **NOTE**
6>
7> This component is no longer maintained since API version 13. You are advised to use the [Navigation](ts-basic-components-navigation.md) component for page routing.
8>
9> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
10
11
12## Child Components
13
14Supported
15
16
17## APIs
18
19Navigator(value?: {target: string, type?: NavigationType})
20
21**Atomic service API**: This API can be used in atomic services since API version 11.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25**Parameters**
26
27| Name| Type      | Mandatory| Description                                      |
28| ------ | -------------- | ---- | ---------------------------------------------- |
29| target | string         | Yes  | Path of the target page to be redirected to.    |
30| type   | [NavigationType](#navigationtype) | No  | Navigation type.<br>Default value: **NavigationType.Push**|
31
32## NavigationType
33
34**Atomic service API**: This API can be used in atomic services since API version 11.
35
36**System capability**: SystemCapability.ArkUI.ArkUI.Full
37
38| Name     | Value | Description                        |
39| ------- | ------- | -------------------------- |
40| Push    | 1 | Navigates to the specified page in the application.              |
41| Replace | 2 | Replaces the current page with another one in the application and destroys the current page.|
42| Back    | 3 | Returns to the specified page. If the specified page does not exist in the stack, no response is returned. If no page is specified, the previous page is returned to.|
43
44## Attributes
45
46### active
47
48active(value: boolean)
49
50Sets whether the **Navigator** component is activated. If the component is activated, the corresponding navigation takes effect.
51
52**Atomic service API**: This API can be used in atomic services since API version 11.
53
54**System capability**: SystemCapability.ArkUI.ArkUI.Full
55
56**Parameters**
57
58| Name| Type   | Mandatory| Description                      |
59| ------ | ------- | ---- | -------------------------- |
60| value  | boolean | Yes  | Whether the **Navigator** component is activated.|
61
62### params
63
64params(value: object)
65
66Sets the data that needs to be passed to the target page during redirection.
67
68**Atomic service API**: This API can be used in atomic services since API version 11.
69
70**System capability**: SystemCapability.ArkUI.ArkUI.Full
71
72**Parameters**
73
74| Name| Type  | Mandatory| Description                                                        |
75| ------ | ------ | ---- | ------------------------------------------------------------ |
76| value  | object | Yes  | Data that needs to be passed to the target page during redirection. You can use [router.getParams()](../js-apis-router.md#routergetparams) to obtain the data on the target page.|
77
78### target
79
80target(value: string)
81
82Path of the target page to be redirected to. The target page must be added to the **main_pages.json** file.
83
84**Atomic service API**: This API can be used in atomic services since API version 11.
85
86**System capability**: SystemCapability.ArkUI.ArkUI.Full
87
88**Parameters**
89
90| Name| Type  | Mandatory| Description              |
91| ------ | ------ | ---- | ------------------ |
92| value  | string | Yes  | Path of the target page to be redirected to.|
93
94### type
95type(value: NavigationType)
96
97Sets the navigation type.
98
99**Atomic service API**: This API can be used in atomic services since API version 11.
100
101**System capability**: SystemCapability.ArkUI.ArkUI.Full
102
103**Parameters**
104
105| Name| Type  | Mandatory| Description                                          |
106| ------ | ------ | ---- | ---------------------------------------------- |
107| value  | [NavigationType](#navigationtype) | Yes  | Navigation type.<br>Default value: **NavigationType.Push**|
108
109
110## Example
111
112```ts
113// Navigator.ets
114@Entry
115@Component
116struct NavigatorExample {
117  @State active: boolean = false
118  @State name: NameObject = { name: 'news' }
119
120  build() {
121    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
122      Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) {
123        Text('Go to ' + this.name.name + ' page')
124          .width('100%').textAlign(TextAlign.Center)
125      }.params(new TextObject(this.name)) // Pass parameters to the Detail page.
126
127      Navigator() {
128        Text('Back to previous page').width('100%').textAlign(TextAlign.Center)
129      }.active(this.active)
130      .onClick(() => {
131        this.active = true
132      })
133    }.height(150).width(350).padding(35)
134  }
135}
136
137interface NameObject {
138  name: string;
139}
140
141class TextObject {
142  text: NameObject;
143
144  constructor(text: NameObject) {
145    this.text = text;
146  }
147}
148```
149
150```ts
151// Detail.ets
152import { router } from '@kit.ArkUI'
153
154@Entry
155@Component
156struct DetailExample {
157  // Receive the input parameters of Navigator.ets.
158  params: Record<string, NameObject> = router.getParams() as Record<string, NameObject>
159  @State name: NameObject = this.params.text
160
161  build() {
162    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
163      Navigator({ target: 'pages/container/navigator/Back', type: NavigationType.Push }) {
164        Text('Go to back page').width('100%').height(20)
165      }
166
167      Text('This is ' + this.name.name + ' page')
168        .width('100%').textAlign(TextAlign.Center)
169    }
170    .width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
171  }
172}
173
174interface NameObject {
175  name: string;
176}
177```
178
179```ts
180// Back.ets
181@Entry
182@Component
183struct BackExample {
184  build() {
185    Column() {
186      Navigator({ target: 'pages/container/navigator/Navigator', type: NavigationType.Back }) {
187        Text('Return to Navigator Page').width('100%').textAlign(TextAlign.Center)
188      }
189    }.width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
190  }
191}
192```
193
194![en-us_image_0000001212058486](figures/en-us_image_0000001212058486.gif)
195