After the project synchronization is complete, choose **entry**>**src**>**main**>**ets**>**MainAbility**>**pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **<Text>** component. The sample code in the **index.ets** file is shown below:
```
```ts
// index.ets
@Entry
@Component
structIndex{
...
...
@@ -66,7 +67,8 @@
On the default page, add a **<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
```
```ts
// index.ets
@Entry
@Component
structIndex{
...
...
@@ -119,7 +121,8 @@
Add **<Text>** and **<Button>** components and set their styles, as you do for the first page. The sample code in the **second.ets** file is shown below:
```
```ts
// second.ets
@Entry
@Component
structSecond{
...
...
@@ -161,7 +164,8 @@ You can implement page redirection through the page router, which finds the targ
In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below:
```
```ts
// index.ets
importrouterfrom'@ohos.router';
@Entry
...
...
@@ -205,7 +209,8 @@ You can implement page redirection through the page router, which finds the targ
In the **second.ets** file of the second page, bind the **onClick** event to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.ets** file is shown below: