I cannot navigate deeper into the views in Swiftui

Question

I have three views in my project - ContentView, SecondView, ThirdView

I want to navigate from contentView to secondView and secondView to thirdView.

ContentView :-

import SwiftUI

struct ContentView: View {
    @State private var path = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $path) {
            Button {
                path.append("SecondView")
            } label: {
                Text("This is the first view")
                
            }
            .navigationDestination(for: String.self) { view2 in
                if view2 == "SecondView" {
                 SecondView()
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

SecondView :-

import SwiftUI

struct SecondView: View {
    @State private var path = NavigationPath()
    var body: some View {
        NavigationStack(path: $path) {
            Button {
                path.append("ThirdView")
            } label: {
                Text("This is the second view")
                
            }
            .navigationDestination(for: String.self) { view2 in
                if view2 == "ThirdView" {
                 ThirdView()
                }
            }
        }
    }
}

struct SecondView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationStack {
            SecondView()
        }
    }
}

ThirdView :-

import SwiftUI

struct ThirdView: View {
    var body: some View {
        Text("This is the third view")
    }
}

struct ThirdView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationStack {
            ThirdView()
        }
    }
}

What is happening :-

Whenever I tap on the "This is the first view" button in my ContentView, I am navigated to SecondView and automatically navigated back to contentView.

What I want :-

I want to navigate from contentView to secondView and secondView to thirdView.

Answer 1

You shouldn't have multiple NavigationStacks in the hierarchy. You should have one and pass the path via a Binding.

struct ContentView: View {
    @State private var path = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $path) {
            Button {
                path.append("SecondView")
            } label: {
                Text("This is the first view")
                
            }
            .navigationDestination(for: String.self) { view in
                switch view {
                case "SecondView":
                    SecondView(path: $path)
                case "ThirdView":
                    ThirdView()
                default:
                    Text("Unknown")
                }
            }
        }
    }
}

struct SecondView: View {
    @Binding var path: NavigationPath
    var body: some View {
        Button {
            path.append("ThirdView")
        } label: {
            Text("This is the second view")
            
        }
    }
}

struct ThirdView: View {
    var body: some View {
        Text("This is the third view")
    }
}

struct SecondView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationStack {
            SecondView(path: .constant(NavigationPath()))
        }
    }
}