# Navigation

You can navigate between pages (i.e. between root components) using the following extensions API:

```
INavigation.PushAsync<T>()
```

where T is the type of the component to create as root of the new page.

For example this is a component that move to second page hosting ChildPageComponent when user click a button:

```csharp
public class MainPageComponent : RxComponent
{
    public override VisualNode Render()
    {
        return new RxNavigationPage()
        {
            new RxContentPage()
            {
                new RxButton("Move To Page")
                    .VCenter()
                    .HCenter()
                    .OnClick(OpenChildPage)
            }
            .Title("Main Page")
        };
    }

    private async void OpenChildPage()
    {
        await Navigation.PushAsync<ChildPageComponent>();
    }
}
```

and this is the code implementing the child page with a button to go back

```csharp
public class ChildPageComponent : RxComponent
{
    public override VisualNode Render()
    {
        return new RxContentPage()
        {
            new RxButton("Back")
                .VCenter()
                .HCenter()
                .OnClick(GoBack)
        }
        .Title("Child Page");
    }

    private async void GoBack()
    {
        await Navigation.PopAsync();
    }
}
```

![](https://3850152230-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3fGRH7kWyk6bJDMyZV%2F-M43JtI3vNslufdIYyFE%2F-M43LgRluq6Hh1sZqc-r%2FReactorUI_NavigationDemo.gif?alt=media\&token=d14f01d0-3e18-4e3b-9087-54c0e123540f)

#### Passing data between pages

You can pass parameters to other pages using component **Props**. Let's modify the main page component from the above sample to hold a state:

```csharp
public class MainPageComponentState : IState
{
    public int Value { get; set; }
}

public class MainPageComponent : RxComponent<MainPageComponentState>
{
    public override VisualNode Render()
    {
        return new RxNavigationPage()
        {
            new RxContentPage()
            {
                new RxStackLayout()
                {
                    new RxLabel($"Value: {State.Value}")
                        .FontSize(NamedSize.Large),
                    new RxButton("Move To Page")
                        .OnClick(OpenChildPage)
                }
                .VCenter()
                .HCenter()
            }
            .Title("Main Page")
        };
    }

    private async void OpenChildPage()
    {

    }
}
```

In the `OpenChildPage` callback we need to open the child page passing current value: we want to edit the value in entry control.\
Let's change the child page adding a state and a props as the following:

```csharp
public class ChildPageComponentState : IState
{
    public int Value { get; set; }
}

public class ChildPageComponentProps : IProps
{
    public int InitialValue { get; set; }

    public Action<int> OnValueSet { get; set; }
}

public class ChildPageComponent : RxComponent<ChildPageComponentState, ChildPageComponentProps>
{
    protected override void OnMounted()
    {
        State.Value = Props.InitialValue;

        base.OnMounted();
    }

    public override VisualNode Render()
    {
        return new RxContentPage()
        {
            new RxStackLayout()
            {
                new RxEntry(State.Value.ToString())
                    .OnAfterTextChanged(_=>SetState(s => s.Value = int.Parse(_)))
                    .Keyboard(Keyboard.Numeric),
                new RxButton("Back")
                    .OnClick(GoBack)
            }
            .VCenter()
            .HCenter()
        }
        .Title("Child Page");
    }

    private async void GoBack()
    {
        Props.OnValueSet(State.Value);

        await Navigation.PopAsync();
    }
}

```

Now the ChildPageComponent has a state and a props: the latter will hold the initial value and a callback action to call when user click the back button.

Finally call the child page setting its props properties:

```csharp
private async void OpenChildPage()
{
    await Navigation.PushAsync<ChildPageComponent, ChildPageComponentProps>(_=>
    {
        _.InitialValue = State.Value;
        _.OnValueSet = this.OnValueSetFromChilPage;
    });
}

private void OnValueSetFromChilPage(int newValue)
{
    SetState(s => s.Value = newValue);
}
```

![Passing data between pages](https://3850152230-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3fGRH7kWyk6bJDMyZV%2F-M4UwxO-M3VkJeEjeeQs%2F-M4VpH1I0NyVRDWYNRIt%2FReactorUI_NavicationParamsDemo.gif?alt=media\&token=b3a2415a-8dde-4fd7-9b38-e7e7a634b7fa)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://adospace.gitbook.io/reactorui/guide/components-with-a-state/navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.