SwiftUI NavigationView inside TabView pops back to Root, from any view in the stack

Question

When adding a NavigationView within a TabView I get a pop-to-root situation from any of the views in the stack.

Of course the expected behaviour would be for each view to just fall back to the previous, until we get to Root (Home)

(Got a functional work around, but it just doesn't sit well with me.)

So I'm really hoping that someone can point me to the cause, and possible solution to the issue.

Heres the condensed code sample for the entire scenario.

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        TabView {
            NavigationView{ HomeView() }
                .tabItem { Image(systemName: "house"); Text("Home") }
            
            Text("Left").font(.title).fontWeight(.heavy)
                .tabItem { Image(systemName: "chevron.left.square"); Text("Left") }
            
            Text("Up").font(.title).fontWeight(.heavy)
                .tabItem { Image(systemName: "chevron.up.square"); Text("Up") }
            
            Text("Right").font(.title).fontWeight(.heavy)
                .tabItem { Image(systemName: "chevron.right.square"); Text("Right") }
        }
    }
}


struct HomeView: View {
  var body: some View {
      Text("Home").font(.title).fontWeight(.heavy)
      .navigationBarTitle("Home")
      .navigationBarItems(trailing: NavigationLink(destination: NavChild1(), label: { Text("GoTo 1 >") }))
  }
}

struct NavChild1: View {
  var body: some View {
       Text("Nav1").font(.title).foregroundColor(.white).background(Color.red)
       .navigationBarTitle("Nav 1")
       .navigationBarItems(trailing: NavigationLink(destination: NavChild2(), label: { Text("GoTo 2 >") }))
  }
}

struct NavChild2: View {
  var body: some View {
       Text("Nav2").font(.title).foregroundColor(.white).background(Color.green)
       .navigationTitle("Nav 2")
       .navigationBarItems(trailing: NavigationLink(destination: NavChild3(), label: { Text("GoTo 3 >") }))
  }
}

struct NavChild3: View {
  var body: some View {
       Text("Nav3").font(.title).foregroundColor(.white).background(Color.blue)
       .navigationTitle("Nav 3")
  }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
} 

Answer 1

It looks like the NavigationLink doesn't work well with .navigationBarItems(trailing:) .

Instead, you can use a toolbar and add a ToolbarItem with the .navigationBarTrailing placement:

struct HomeView: View {
    var body: some View {
        Text("Home").font(.title).fontWeight(.heavy)
            .navigationTitle("Home")
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    NavigationLink(destination: NavChild1(), label: { Text("GoTo 1 >") })
                }
            }
    }
}

Then do the same for the rest of the links:

struct NavChild1: View {
    var body: some View {
        Text("Nav1").font(.title).foregroundColor(.white).background(Color.red)
            .navigationTitle("Nav 1")
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    NavigationLink(destination: NavChild2(), label: { Text("GoTo 2 >") })
                }
            }
    }
}

struct NavChild2: View {
    var body: some View {
        Text("Nav2").font(.title).foregroundColor(.white).background(Color.green)
            .navigationTitle("Nav 2")
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    NavigationLink(destination: NavChild3(), label: { Text("GoTo 3 >") })
                }
            }
    }
}