Client-Side Routing

Komponent supports basic client-side routing.

WARNING

Note that no scroll behaviour is currently implemented. Previous scroll state is not remembered when navigating back, and it is not reset when navigating to a new page.

Installation

Client-side routing requires an external dependency:

build.gradle.kts

repositories {
    mavenCentral()
}

kotlin {
    sourceSets {
        jsMain.dependencies {
            implementation("me.sparky983.komponent:routing:0.1.0")
        }
    }
}

Usage

Client-side routes are simply defined using the Router and Route components. The each Route component nested inside the Router represents a separate, client-side page.

fun Html.MyApp() {
    Router {
        Route("/") {
            // render page at "/"
        }
    }
}

or to capture a path variable:

INFO

Currently variables cannot be greedy.

fun Html.MyApp() {
    Router {
        Route("/project/:id") { ctx ->
            val id = ctx["id"] 
        } 
    }
}

To match against fallbacks, the Fallback component can be used:

fun Html.MyApp() {
    Router {
        Fallback { 
            text("Page not found") 
        } 
    }
}