Single Component With Back button for all Pages

I have a custom Toobar component in my app.


<StackPanel Dock="Top" ux:Class="Toolbar">

    <Router ux:Dependency="router"/>

    <JavaScript File="../Backend.js" />

    <string ux:Property="Title" />
    <float4 ux:Property="Color" />

    <Panel Height="56" Color="{Property this.Color}" Padding="16, 0">
        <Button Clicked="{goBack}">
          <Icon FontSize="20" Margin="0,16">&#xE876;</Icon>
        <Text Value="{Property this.Title}" Alignment="CenterLeft" Font="medium" FontSize="15" Margin="56,0" TextColor="#fff" />
        <StackPanel Orientation="Horizontal" Alignment="Right" >
            <Icon FontSize="20"  Margin="0,16">&#xE5D4;</Icon>

    <!-- Flat or Raised?-->
    <DropShadow />

<!-- TOOLBAR END -->

The button calls a function in my main JS file that tells the router to go back. I reference the app’s router to the Toolbar component as a ux:Dependency. The toolbar is included in pretty much every page in the app.

My problem is basically that it doesn’t go back when pressed, what am I doing wrong?

Here is what I use and its working.

    <WhileTrue Value="{Property this.ShowBackButton}">
    <Panel Width="50" Height="50">
    <MDI Alignment="VerticalCenter" TextAlignment="Left" FontSize="30" Name="back" TextColor="#fff" Margin="10,0,0,0">&#xf2ea;</MDI>
    <Clicked Handler="{routerPop}" />


module.exports = {
  routerPop : function() { router.goBack();}

Sorry Ish, I can’t quite understand what you are doing. Could you show me some more of your code so I can get a better idea of where and how you are using it?


Could you share some more of your code Casey? Hard to see why it’s not working the way you want.

Hi Kristian,

I’ve actually just managed to fix it now, I was using router.goto() for navigation which resets the navigation path each use. Switched to router.push() and works perfect now! :slight_smile: