Activated Events in nested Navigator

navigation.ux

<App>
  <ClientPanel>
    <Router ux:Name="mainRouter"/>

    <PageControl Active="first">
      <Page ux:Name="first">
        <JavaScript>
          exports.gotoSecond = () => {
            mainRouter.goto("second");
          }
        </JavaScript>
        <Activated>
          <DebugAction Message="first activated" />
        </Activated>
        <StackPanel Alignment="Center" >
          <Text FontSize="40" Value="FIRST" />
          <Button Text="GoTo Second">
            <Clicked Handler="{gotoSecond}"/>
          </Button>
        </StackPanel>
      </Page>
      <Page ux:Name="second">

        <Activated>
          <DebugAction Message="second wrapper activated" />
        </Activated>

        <Navigator DefaultPath="secondFirst" ux:Name="secondNavigator">

          <Page ux:Name="secondFirst">
            <!-- <Activated Bypass="Never">
              <DebugAction Message="secondFirst activated" />
            </Activated> -->
            <WhileActive>
              <DebugAction Message="secondFirst activated" />
            </WhileActive>

            <JavaScript>
              exports.gotoFirst = () => {
                mainRouter.goto("first");
              }
              exports.gotoSecondSecond = () => {
                mainRouter.pushRelative(secondNavigator, "secondSecond");
              }
            </JavaScript>
            <StackPanel Alignment="Center" >
              <Text FontSize="40" Value="SECOND-FIRST" />
              <Button Text="GoTo First">
                <Clicked Handler="{gotoFirst}"/>
              </Button>
              <Button Text="GoTo Second-Second">
                <Clicked Handler="{gotoSecondSecond}"/>
              </Button>
            </StackPanel>
          </Page>

          <Page ux:Name="secondSecond">
            <JavaScript>
              exports.gotoFirst = () => {
                mainRouter.goto("first")
              }
              exports.goBack = () => {
                mainRouter.goBack()
              }
            </JavaScript>

            <!-- <Activated Bypass="Never">
              <DebugAction Message="secondSecond activated" />
            </Activated> -->
            <WhileActive>
              <DebugAction Message="secondSecond activated" />
            </WhileActive>

            <StackPanel Alignment="Center" >
              <Text FontSize="40" Value="SECOND-SECOND" />
              <Button Text="GoTo First">
                <Clicked Handler="{gotoFirst}"/>
              </Button>
              <Button Text="Go Back">
                <Clicked Handler="{goBack}"/>
              </Button>
            </StackPanel>

          </Page>
        </Navigator>

      </Page>
    </PageControl>
  </ClientPanel>
</App>