SwiftUI - NavigationStack not working as expected

Question

For some reason, my NavigationStack is bugging out when clicking through. I have changed NavigationView -> NavigationStack by it seems to be more complicated than anticipated and would greatly appreciate the help.

In one of my Views the NavigationStack works correctly. However, now I am trying to get the view before that to have a navigation link to the one that works correctly but now it seems to do this.

NavigationStack that does not work correctly:

enum HomeRoute: Hashable {
    case UserProfile
    case HomeAnalytics
}
struct HomeView: View {
    var title = "SwiftUIToolbar"
    @State var path = NavigationPath()
    
    //required for SignIn & SignOut.
    @EnvironmentObject var viewModel:AppViewModel
    
    //@StateObject private var homeNavigation: HomeNavigationViewModel = HomeNavigationViewModel()
        
    var body: some View {
        NavigationStack(){
        VStack(){
            HeaderView(path: $path)
                TabView {
                    FridgePantryView()
                        .tabItem {
                            Image(systemName: "carrot")
                            Text("Fridge & Pantry")
                        }
                    
                    Text("Recipes")
                        .font(.system(size: 30, weight: .bold, design: .rounded))
                        .tabItem {
                            Image(systemName: "fork.knife")
                            Text("Recipes")
                        }
                    
                    Text("Shopping")
                        .font(.system(size: 30, weight: .bold, design: .rounded))
                        .tabItem {
                            Image(systemName: "cart")
                            Text("Shopping")
                        }
                }
            }
            
        }
        
    }
}

struct HeaderView: View {
    
    var body: some View {
        NavigationStack() {
            HStack{
                HStack{
                    //Click Through for Settings View
                    NavigationLink("Home",value: HomeRoute.HomeAnalytics)
                }
                
                .padding(.horizontal, 15.0)
                .padding(.vertical, 3.0)
                Spacer()
                HStack (spacing: 20.0) {

                        //Click Through for Settings View
                        
                        NavigationLink("UserProfile",value: HomeRoute.UserProfile)

                            
                        
                    }
                }
            .navigationDestination(for: HomeRoute.self) { route in
                    switch route {
                    case .UserProfile:
                        SettingsView()
                    case .HomeAnalytics:
                        SettingsView()
                    }
            }
        }
    }
}

Here is the next part of the code that is supposed to feed from this. But this second part works correctly.

enum SettingsRoute: Hashable {
    case Profile
    case Settings
    case GiveUsFeedback
    case InviteFriends
    case HelpSupport
    case SavedRecipes
    case LogOut
    
}

struct SettingsView: View {
    
    @State private var path = NavigationPath()
    //var ListOfSettings: [ListOfSettings] = [ProfileView(),Settings(),GiveUsFeedback(),InviteFriends(),HelpSupport(),SavedRecipes(),LogOut()] 
    @EnvironmentObject var viewModel: AppViewModel
    //Array of Titles wanted for List view.
    //private var SettingsContentTitle: [String] = ["Profile","Settings","Give us Feedback","Invite Friends","Help & Support","Saved Recipes","Log Out"]
    
    
   
    var body: some View {
        NavigationStack() {

            VStack(){

                List() {
                    NavigationLink("Profile", value: SettingsRoute.Profile)
                        .padding()
                    NavigationLink("Settings", value: SettingsRoute.Settings)
                        .padding()
                    NavigationLink("Give us Feedback", value: SettingsRoute.GiveUsFeedback)
                        .padding()
                    NavigationLink("Invite Friends", value: SettingsRoute.InviteFriends)
                        .padding()
                    NavigationLink("Help & Support", value: SettingsRoute.HelpSupport)
                        .padding()
                    NavigationLink("Saved Recipes", value: SettingsRoute.SavedRecipes)
                        .padding()
                    NavigationLink("Log Out", value: SettingsRoute.LogOut)
                        .padding()
                        
                }
                .listStyle(.inset)
                
                
                //Created a navigation switch for NavigationLink paths above.
                ///communicates with enum above.
                .navigationDestination(for: SettingsRoute.self) { route in
                    switch route {
                    case .Profile:
                        ProfileView()
                    case .Settings:
                        Settings()
                    case .GiveUsFeedback:
                        GiveUsFeedback()
                    case .InviteFriends:
                        InviteFriends()
                    case .HelpSupport:
                        HelpSupport()
                    case .SavedRecipes:
                        SavedRecipes()
                    case .LogOut:
                        LogOut()
                    }
                    
                }
                Spacer()
                signoutButton()
            }
            .navigationTitle("Hi")
            
        }
        
    }
}

Answer 1

You forgot to pass in the path to the NavigationStack:

NavigationStack(path: $path) { /// <—- here!

}