HierarchicalNavigation does not work correctly

General
1

Alone running smoothly in both function (HierarchicalNavigation and login screen). When integrated with the HierarchicalNavigation the login screen HierarchicalNavigation not the result I wanted.

Does anyone have an idea?

UX Code

<App Theme="Basic" ClearColor="#200c50">
    <Font File="Assets/Fonts/RobotoCondensed-Bold.ttf" ux:Global="RobotoBold" />
    <Font File="Assets/Fonts/RobotoCondensed-Regular.ttf" ux:Global="RobotoRegular" />
    <Font File="Assets/Fonts/RobotoCondensed-Light.ttf" ux:Global="RobotoLight" />

    <Panel>
        <HierarchicalNavigation ux:Name="nav" ReuseExistingNode="false" Active="loginPage" />

        <Style>
            <Page>
                <EnteringAnimation>
                    <Move X="1" RelativeTo="ParentSize" />
                </EnteringAnimation>
                <ExitingAnimation>
                    <Move X="-1" RelativeTo="ParentSize" />
                </ExitingAnimation>
            </Page>
        </Style>

        <Page ux:Name="loginPage">
            <DockPanel>
                <Style>
                    <Text TextColor="#ffffff" />
                    <TextInput PlaceholderColor="#ffffff80" TextColor="#ffffff" CaretColor="#ffffff" />
                </Style>

                <!-- Button colors -->
                <float4 ux:Key="C600" ux:Value="#8869e5" />
                <float4 ux:Key="C700" ux:Value="#6447b3" />
                <float4 ux:Key="CFillFore" ux:Value="#644793" />

                <StatusBarBackground Dock="Top" />
                <BottomBarBackground Dock="Bottom" />

                <JavaScript File="MainView.js" />

                <Grid Rows="1,1">

                    <StackPanel Alignment="VerticalCenter" Margin="50,0,50,0">
                        <TextInput Font="RobotoLight" PlaceholderText="email" Value="{email}" />
                        <TextInput Font="RobotoLight" PlaceholderText="password" IsPassword="true" Value="{password}" />
                        <Button Text="Log in" IsEnabled="{areCredentialsValid}" Clicked="{loginButtonClick}" />

                        <Match Value="{status}">
                            <Case Number="422">
                                <Text Font="RobotoLight" Alignment="HorizontalCenter" Opacity=".5" Value="{msg}" />
                            </Case>
                            <Case Number="200">
                                <NavigateTo Target="subPage1" />
                            </Case>
                        </Match>
                    </StackPanel>

                </Grid>
            </DockPanel>
        </Page>

        <Page ux:Name="subPage1" ux:AutoBind="true">
            <StackPanel>
                <Text>Welcome to page 1!</Text>
                <Button Text="Go Back">
                    <Clicked>
                        <GoBack />
                    </Clicked>
                </Button>
            </StackPanel>
        </Page>

        <Page ux:Name="subPage2" ux:AutoBind="false">
            <StackPanel>
                <Text>Welcome to page 2!</Text>
                <Button Text="Go Back">
                    <Clicked>
                        <GoBack />
                    </Clicked>
                </Button>
            </StackPanel>
        </Page>

    </Panel>
</App>

JS Code

var Observable = require("FuseJS/Observable");

var email = Observable("");
var password = Observable("");
var status = Observable("");
var token = Observable("");
var msg = Observable("");

var areCredentialsValid = Observable(function() {
  return email.value != "" && password.value != "";
});

var loginButtonClick = function () {
    console.log("Button was clicked") ;
    var body = { "email" : email.value, "password" : password.value };
    fetch("http://example.com/login&quot;, {      method: 'post',
      body: JSON.stringify(body),
      headers: new Headers({
        'Content-Type': 'application/json'
    })
    })
    .then(function(response) { 
      console.log("1");
      console.log(JSON.stringify(response));
      status.value = response.status;
      return response.json(); 
    })
    .then(function(responseObject) {
      console.log("2");
      console.log(JSON.stringify(responseObject));
      console.log(responseObject.email);
      token.value = "Token: " + responseObject.token;
      msg.value = responseObject.message;
    }).catch(function (err) {
      debug_log('Error: ' + err);
    });
}

module.exports = {
        email: email,
        password: password,
        areCredentialsValid: areCredentialsValid,
        loginButtonClick: loginButtonClick,
        status: status,
        token: token,
        msg: msg
      };