Skip to content

🚦 Improved nested routing

Compare
Choose a tag to compare
@MihaelIsaev MihaelIsaev released this 28 Mar 16:54
· 25 commits to master since this release
import Web

@main
class App: WebApp {
    @AppBuilder override var app: Configuration {
        Routes {
            Page { IndexPage() }
            Page("space") { SpacePage() }
            Page("**") { NotFoundPage() }
        }
    }
}

class SpacePage: PageController {
    // here we pass all fragment routes into the root router
    class override var fragmentRoutes: [FragmentRoutes] { [fragment] }

    // here we declare fragment with its relative routes
    static var fragment = FragmentRoutes {
        Page("earth") {
            PageController { "earth" }.onDidLoad {
                print("🌎 earth loaded")
            }
        }
        Page("moon") {
            PageController { "moon" }.onDidLoad {
                print("🌙 moon loaded")
            }
        }
    }

    // you can declare multiple different fragment routes

    @DOM override var body: DOM.Content {
        H1("Space Page")
        Button("Load Earth").display(.block).onClick {
            self.changePath(to: "/space/earth")
        }
        Br()
        Button("Load Moon").display(.block).onClick {
            self.changePath(to: "/space/moon")
        }
        FragmentRouter(self, Self.fragment) // <== here we add fragment into the DOM
    }
}