How am I misusing NavigationStack?

Question

I have this tiny sample of code in trying to use the new NavigationStack, but I get an error: A NavigationLink is presenting a value of type “TransactionRoute” but there is no matching navigation destination visible from the location of the link. The link cannot be activated.

What am I doing wrong?

    import SwiftUI

    struct TransactionRoute: Identifiable {
        let id = UUID()
        let realm: TransactionRealm
        let transaction: String?
    }

    extension TransactionRoute: Equatable, Hashable {
        static func == (lhs: TransactionRoute, rhs: TransactionRoute) -> Bool {
            lhs.id == rhs.id
        }

        public func hash(into hasher: inout Hasher) {
            hasher.combine(id)
        }
    }

    enum TransactionRealm: Int {
        case basic
        case upcoming
        case recurring
    }

    struct ContentView: View {
        @State var navigationPath = NavigationPath()

        var body: some View {
            NavigationStack(path: $navigationPath) {
                VStack {
                    Image(systemName: "globe")
                        .imageScale(.large)
                        .foregroundColor(.accentColor)
                        .padding(.bottom, 24)
                        .onTapGesture {
                            navigationPath.append(TransactionRoute(realm: .basic, transaction: nil))
                        }
                    Text("Hello, world!")
                        .onTapGesture {
                            navigationPath.append(TransactionRoute(realm: .upcoming, transaction: nil))
                        }
                }
            }
            .navigationDestination(for: TransactionRoute.self) { route in
                switch route.realm {
                case .basic:
                    Text("Basic")

                case .upcoming:
                    Text("Upcoming")

                case .recurring:
                    Text("Recurring")
                }
            }
        }
    }

Lorenlorena

Answer 1

Like most other navigation modifiers (navigationTitle, navigationBarTitleDisplayMode), navigationDestination goes inside the NavigationStack. Think of it as if the NavigationStack gets information from within its braces.

NavigationStack(path: $navigationPath) {
    VStack {
        /// ...
    }
    .navigationDestination(for: TransactionRoute.self) { route in
        switch route.realm {
        case .basic:
            Text("Basic")

        case .upcoming:
            Text("Upcoming")

        case .recurring:
            Text("Recurring")
        }
    }
}

Carolacarolan

And they need 3 navigationDestinations instead of a case statement – Hooghly

@Hooghly shouldn't the switch case work though? I thought you only needed a different navigationDestination when the data type is different – Carolacarolan