How to have only one Navigation Link at a time

Question

I created a program that helped me understand the basics of navigation links which I am still learning. I was wondering how I would get rid of the navigation links stacking on top of each other.

import SwiftUI

struct RedOneView: View {
    var body: some View {
        NavigationView{
         
            VStack{
                CircleViewNumber(color: .red, number: 1)
                    .navigationTitle("Red one")
                    .offset(y: -60)
                
                NavigationLink(destination: BlueTwoView(color: .orange), label: {
                        Text("Blue View")
                        .bold()
                        .frame(width: 200, height: 50)
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
            })
            
        }
        
    }
}
    
struct CircleViewNumber: View{
        var color: Color
        var number: Int
        
        var body: some View{
            ZStack{
                Circle()
                    .frame(width: 200, height: 200)
                    .foregroundColor(color)
                Text("\(number)")
                    .foregroundColor(.white)
                    .font(.system(size: 70, weight: .bold))
                
        }
    }
}
    
    struct test: View{
        var number: Int
        var body: some View{
            
            ZStack{
                Circle()
                    .scale(1.5)
                    .foregroundColor(.blue)
            Text("\(number)")
                    
            }
        }
        
    }
    
    struct BlueTwoView: View {
        var color: Color
        var body: some View {
            NavigationView{
                
                VStack{
                    CircleViewNumber(color: color, number: 2)
                        .navigationTitle("Blue two")
                        .offset(y: -60)
                    
                    NavigationLink(destination: GreenThreeView(), label: {
                        Text("Next Screen")
                    })
                    
                }
                
            }
        }
    }
    
    struct GreenThreeView: View {
       
        var body: some View {
            NavigationView{
                
                VStack{
                    CircleViewNumber(color: .green, number: 2)
                        .navigationTitle("Green three")
                        .offset(y: -60)
                    
                    NavigationLink(destination: test(number: 5), label: {
                        Text("Next Screen")
                    })
                    
                }
                
            }
        }
    }
   
    
struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            RedOneView()
        }
    }
}

So how would I go about getting rid of navigation link so that in you cannot just skip to the very first link (red one) but instead there is one button and you must go each screen individually.

Answer 1

You should use only one NavigationView in your navigation stack. So you have to get rid of nested NavigationView's in your components. You can simply delete NavigationView everywhere except RedOneView.

But I suggest creating RootView component with NavigationView and get rid of NavigationView in all child components

struct RootView: View {
    var body: some View {
        NavigationView {
           RedOneView()
        }
    }
}

struct RedOneView: View {
    var body: some View {
        VStack {
            CircleViewNumber(color: .red, number: 1)
                .navigationTitle("Red one")
                .offset(y: -60)
            
            NavigationLink(destination: BlueTwoView(color: .orange), label: {
                    Text("Blue View")
                    .bold()
                    .frame(width: 200, height: 50)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
        })
        
    }
}

struct BlueTwoView: View {
    var color: Color
    var body: some View {
        VStack {
            CircleViewNumber(color: color, number: 2)
                .navigationTitle("Blue two")
                .offset(y: -60)
            
            NavigationLink(destination: GreenThreeView(), label: {
                Text("Next Screen")
            })
            
        }
    }
}
//...