In the documentation for scalajs-react
's router, @japgolly cautions users of the library that starting URLs with '/' slashes requires additional server configuration.
To allow pretty URLs without #
, so far I've tried to write a catch-all route in the Play routes
file like the following:
# Home page
GET / com.xyz.controllers.Application.index(path: String = "")
...
# Catch-all route
GET /*path com.xyz.controllers.Application.index(path: String)
with the matching index path in Application.scala
def index(path: String = "") = Action {
Ok(views.html.index("Title"))
}
and finally the routes declared using RouterConfigDsl
in the front-end:
def create = Router(BaseUrl.until_#, RouterConfigDsl[Loc].buildConfig { dsl =>
import dsl._
( emptyRule
| staticRoute(root, DashboardLoc) ~> render(filler("Dashboard"))
| staticRoute("purchase-orders", PurchaseOrdersLoc) ~> render(filler("Purchase Orders"))
| staticRoute("dashboard", DashboardLoc) ~> render(filler("Dashboard"))
| staticRoute("items", ItemsLoc) ~> render(ItemGallery())
| staticRoute("customers", CustomersLoc) ~> render(filler("Customers"))
| staticRoute("sales-orders", SalesOrdersLoc) ~> render(filler("Sales Orders"))
| staticRoute("preorders", PreordersLoc) ~> render(filler("Pre-orders"))
).notFound(redirectToPage(DashboardLoc)(Redirect.Replace))
.setTitle(l => s"XYZ | ${l.name}")
}.renderWith(layout))
Running locally, I have the app auto-redirecting to DashboardLoc
at localhost:9000/dashboard
and the other static routes work when clicking on them within the web app but fail when reloading.
As it turns out, the problem after all was using
BaseUrl.until#
instead ofBaseUrl.fromWindowOrigin_/
. Now all the routes work as expected.