Search code examples
swiftswiftuiswiftui-navigationlinkswiftui-navigationview

SwiftUI navigate back to upper but not root view


I have four pages like so:

  • Page 1
  • Page 2
  • Page 3
  • Page 4

where I navigate between pages based on a state boolean. I am looking to navigate from Page 4 back to Page 2 on the click of a button on page 4.

This is what I have:

import SwiftUI

struct Page1View: View {
    @State var gotoPage2 = false
    
    var body: some View {
        NavigationView {
            Button("Goto Page 2") {
                gotoPage2 = true
            }
            .navigationTitle("Page 1")
            .background(
                NavigationLink(
                    destination: Page2View(),
                    isActive: $gotoPage2,
                    label: {EmptyView()}
                )
            )
        }
    }
}

struct Page2View: View {
    @State var gotoPage3 = false
    
    var body: some View {
        Button("Goto Page 3") {
            gotoPage3 = true
        }
        .navigationTitle("Page 2")
        .background(
            NavigationLink(
                destination: Page3View(
                    gotoPage3: $gotoPage3
                ),
                isActive: $gotoPage3,
                label: {EmptyView()}
            )
        )
    }
}

struct Page3View: View {
    @State var gotoPage4 = false
    @Binding var gotoPage3: Bool
    
    var body: some View {
        Button("Goto Page 4") {
            gotoPage4 = true
        }
        .navigationTitle("Page 3")
        .background(
            NavigationLink(
                destination: Page4View(
                    gotoPage3: $gotoPage3
                ),
                isActive: $gotoPage4,
                label: {EmptyView()}
            )
        )
    }
}

struct Page4View: View {
    @Binding var gotoPage3: Bool
    
    var body: some View {
        Button("Go Back to Page 2") {
            gotoPage3 = false
        }
            .navigationTitle("Page 4")
    }
}

Expected Behaviour When "Go Back to Page 2" is tapped the NavigationView navigates back to Page 2

Actual Behaviour Nothing happens

Observations If Page 2 is the root view then this code works as expected. However, I require to navigate to a page which isn't the root view


Solution

  • Add to NavigationLink in Page3View .isDetailLink(false) - that should help.

    struct Page3View: View {
        
        @State var gotoPage4 = false
        @Binding var gotoPage3: Bool
        
        var body: some View {
            Button("Goto Page 4") {
                gotoPage4 = true
            }
            .navigationTitle("Page 3")
            .background(
                NavigationLink(
                    destination: Page4View(gotoPage3: $gotoPage3),
                    isActive: $gotoPage4,
                    label: { EmptyView() }
                )
                .isDetailLink(false)
            )
        }
        
    }