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")
                }
            }
        }
    }

aheze · Accepted Answer · 2022-09-10 23:03:30Z

21

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")
        }
    }
}

answered Sep 10, 2022 at 23:03

aheze

31.5k12 gold badges107 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

malhal Over a year ago

And they need 3 navigationDestinations instead of a case statement

aheze Over a year ago

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

Collectives™ on Stack Overflow

How am I misusing NavigationStack?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related