Constructing children paths

[annieyang-paytm]

I am trying to utilize your router, but not sure how the path-based routing should work: how to add a new path?
For example, I have a navigation view with 5 children views, which are all list views.
Click any row in childA will go to childB, click any row in childB will go to childB, ...
Currently screen displays childA, how to add childB path to navigator history when click a row in childA? I mean how to define all the children paths and associate to them to children Views: an enum?

[frzi]

SwiftUI Router does not work with NavigationViews. Instead, it's an alternative to it.

Here's a general idea of how to implement the navigation you're talking about:

@main
struct MyApp: App {
	var body: some Scene {
		WindowGroup {
			Router { // <---- very important!
				ChildA()
			}
		}
	}
}

struct ChildA: View {
	var body: some View {
		SwitchRoutes {
			Route(path: ":id/*") { route in
				ChildB(id: route.parameters["id"]!)
			}
			Route {
				List {
					ForEach(1..<10) { index in
						NavLink(to: "\(index)") {
							Text("Go to ChildB(\(index))")
						}
					}
				}
			}
		}
	}
}

struct ChildB: View {
	let id: String
	var body: some View {
		SwitchRoutes {
			Route(path: ":secondId/*") { route in
				// ChildC(id: route.parameters["secondId"]!)
				Text("You chose \(route.parameters["secondId"]!)")
			}
			Route {
				Text("This is ChildB(\(id))")

				List {
					ForEach(1..<100) { index in
						NavLink(to: "\(index)") {
							Text("Go to ChildC(\(index))")
						}
					}
				}
			}
		}
	}
}

In ChildA (and ChildB), based on the current path, we render either the contents of the next screen, or the list of items (in this case just some numbers) containing buttons that navigate to the next screen.

I understand the concept of path-based routing can be very daunting and alien to users unfamiliar with the concept. It can certainly take a bit of getting used to.

If you've worked with frameworks like React, Svelte, Vue or even Flutter before, it should all look very familiar to you. (Path-based routing is the de facto method of implementing navigation with these frameworks)

I'm still trying to reserve time to write tutorials and examples. My apologies, please bear with me 🙇

If using NavigationViews is an absolute must then I'm afraid SwiftUI Router is not the right framework to use.

[annieyang-paytm]

Thank for your quick reply!

You mean NavLink() is the only way to add a new path, right?

[frzi]

Not the only way. But certainly the easiest way!

There’s also the Navigator environment object. This object has a navigate(to:) method, allowing you to programmatically navigate. The NavLink button calls this method when pressed/clicked.

struct SomeView: View {
	@EnvironmentObject var navigator: Navigator
	var body: some View {
		Text("Navigating to /settings in 5 seconds...")
			.onAppear {
				Timer.scheduledTimer(withInterval: 5, repeats: false) { _ in
					navigator.navigate(to: "/settings")
				}
			}
	}
}

You use this when you want to programmatically navigate to another path. E.g.: after performing a network request, or after a certain amount of seconds. If you want the user to navigate to another path after they press a button, you should use NavLink. 😄

[annieyang-paytm]

That's really help me, thanks for help!