Best practices for accessing NavigationPath in child views

Hi all

I'm reworking our app in SwiftUI. My ultimate goal is to access the NavigationPath from a child view which is used throughout different NavgationStacks. While searching for I came across different ways of achieving this. As I'm relatively new to SwiftUI it is hard to understand what the actual best practice seems to be.

So for the use case. My app has a TabView and each Tab has its own NavigationStack which looks something like this

struct TabNavigation: View {
    @State private var selectedProductType: StaticProductType = .all
    @StateObject private var appRouter = AppRouter()

    var body: some View {
        TabView(selection: $appRouter.selectedTab) {
            Overview(activeType: $selectedProductType)
                .tabItem {
                    Label("Home", systemImage: "house")
                }
                .tag(Tab.home)
            AssortmentView(router: $appRouter.assortmentRouter, 
                   activeType: $selectedProductType)
                .tabItem {
                    Label(String(localized: "assortment"), systemImage: 
                    "list.bullet")
                }
                .tag(Tab.assortment)
    }
}

The AssortmenView holds the NavigationStack and defines the routes.

struct AssortmentView: View {
    @Binding var router: AssortmentRouter
    @Binding var activeType: StaticProductType
    
    var body: some View {
        NavigationStack(path: $router.navigationPath) {
            VStack {
                ProductTypeNavigation(activeType: $activeType)
                    .padding(.top, 10)
                    .padding(.horizontal, 10)
                Spacer()
                TabView(selection: $activeType) {
                    ListNavigation(type: .all)
                        .tag(StaticProductType.all)
                    ListNavigation(type: .games)
                        .tag(StaticProductType.games)
                    ListNavigation(type: .digital)
                        .tag(StaticProductType.digital)
                    ListNavigation(type: .toys)
                        .tag(StaticProductType.toys)
                    ListNavigation(type: .movies)
                        .tag(StaticProductType.movies)
                    ListNavigation(type: .books)
                        .tag(StaticProductType.books)
                }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                    
            }
            .addToolbar()
            .navigationDestination(for: AssortmentRouter.Route.self) { route in
                switch route {
                case .overview(let type):
                    OverviewTypeView(type: type)
                case .productDetail(let productId):
                    ProductDetailView(productId: productId)
                        .environmentObject(router)
                case .productList:
                    ProductList()
                }
            }
        }
    }
}

Through my app I often use a view to displaying products. This view is reused over different NavigationStacks.

struct ProductDetailView: View {
    var productId: Int
    @StateObject private var viewModel: ProductDetailViewModel = ProductDetailViewModel()
    @State private var showErrorAlert = false
    @EnvironmentObject var router: AssortmentRouter
    
    var body: some View {
        VStack {
            if !viewModel.isRefreshing {
                let product = viewModel.product
                VStack {
                    Text("Product: \(product.title)")
                    NavigationLink(destination: ProductDetailView(productId: Product.preview.productId)) {
                        Text("Test")
                    }
                }
                .navigationTitle(product.title)
            } else {
                ProgressView()
            }
        }.task {
            await loadProduct()
        }
        .alert("Error", isPresented: $showErrorAlert, presenting: viewModel.localizedError) { _ in
            Button("Try again") {
                Task {
                    await loadProduct()
                }
            }
            Button("Go Back", role: .cancel) {
                // access navigationPath
            }
        } message: { errorMessage in
            Text(errorMessage)
        }
    }
    
    @MainActor
    private func loadProduct() async {
        await viewModel.loadProduct(productId: productId)
        showErrorAlert = viewModel.localizedError != nil
    }
}

In this example I created an AppRouter which holds all information for the routes and some functions to accessing the NavigationPath.

class AppRouter: ObservableObject {
    var assortmentRouter = AssortmentRouter()
    var selectedTab: Tab = .home
    
    func navigateTo(tab: Tab) {
        selectedTab = tab
    }
    
}


class AssortmentRouter: ObservableObject {
    var navigationPath = NavigationPath()
    
    enum Route: Hashable {
        case overview(type: StaticProductType)
        case productList
        case productDetail(productId: Int)
    }
    
    func navigateTo(route: Route) {
        navigationPath.append(route)
    }
}

This works fine as it is. The pro of this solution is that I don't have to pass the NavigationPath down each subview to use it as I can define it as EnvrionmentObject. The problem with this though, I like to reuse ProductDetailView also in my other NavigationStack which won't have a router binding of type AssortmentRouter as you can imagine.

To come back to my initial question, what would be the best way to design this?

• Passing down a NavigationPath Binding and using different typing for navigationDestinaion values
• Define a callback which is passed as function parameter to the detail view
• Using dismiss, but I read that this is can lead to weird behaviour and bugs
• Any other option? Maybe changing the app architecture to handle this a better way

Apolgize the long post, but I would be really glad to get some feedback on this, so I can do it the right way.

Thank you very much