scalajs-router
![Build Status](https://camo.githubusercontent.com/ba8cde24d6222f5672d7867852f5185bd45b5dd01fd3cfd0ec5af5e9a5eff1a3/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f73616b6539322f7363616c616a732d726f757465722f6d61737465722e7376673f6c6f676f3d747261766973267374796c653d666c61742d737175617265)
ScalaJS frontend router.
In your HTML add data-navigate
attribute to nav elements:
<nav>
<button data-navigate="/home">Home</button>
<button data-navigate="/users/1">User details</button>
</nav>
Create element where router will show your dynamic content:
<div id="main"></div>
Then specify your routes and bind the router:
val routes: Router.Routes = {
case "/home" => HomeComponent
case s"/users/$id" => UserDetailsComponent(id.toLong)
case _ => NotFoundComponent
}
Router("main", routes).init()
// components
object HomeComponent extends Component {
def asElement: Element = ...
}
case class UserDetailsComponent(userId: Long) extends Component ..
object NotFoundComponent extends Component ..
You can attach a listener when a route changes:
Router().withListener {
case "/active" => // do something...
case "/other" =>
case whateverElse =>
}.init()
With @Route
macro you can simplify your routes matching to this:
@Route class HomeRoute(p1: "home")()
@Route class UserDetailsRoute(p1: "users", val userId: Long)()
val routes: Router.Routes = {
case HomeRoute() => HomeComponent
case UserDetailsRoute(userId) => UserDetailsComponent(userId)
}