React-router slinky react-slinky-facade

App.scala

package hello.world

import slinky.core._
import slinky.core.annotations.react
import slinky.core.facade.ReactElement
import slinky.web.html._

import scala.scalajs.js
import scala.scalajs.js.annotation.{JSImport, ScalaJSDefined}

@JSImport("resources/App.css", JSImport.Default)
@js.native
object AppCSS extends js.Object

@JSImport("resources/logo.svg", JSImport.Default)
@js.native
object ReactLogo extends js.Object

@react object RouteAlt extends ExternalComponent {
  type Props = typings.reactDashRouterLib.reactDashRouterMod.RouteProps
  override val component = typings.reactDashRouterDashDomLib.reactDashRouterDashDomLibComponents.Route[ReactComponentClass[_]]
}

@react object App {

  type Props = Unit

  import typings.reactLib.ScalableSlinky._
  import typings.reactDashRouterDashDomLib.reactDashRouterDashDomLibComponents._
  import typings.reactDashRouterLib.reactDashRouterMod.RouteProps
  private val css = AppCSS

  val component = FunctionalComponent[Props] { _ =>

    def home = div(
      h2("Home")
    )

    def about = div(
      h2("About")
    )

    def topics = div(
      h2("Topics")
    )

    BrowserRouter.noprops(
      div(
        ul(
          li(Link.props(LinkProps(to = "/"))("Home")),
          li(Link.props(LinkProps(to = "/about"))("About")),
          li(Link.props(LinkProps(to = "/topics"))("Topics"))
        ),
        hr(),
        RouteAlt(RouteProps(exact = true, path = "/", render = _ => home: ReactElement)),
        RouteAlt(RouteProps(path = "/about", render = _ => about: ReactElement)),
        RouteAlt(RouteProps(path = "/topics", render = _ => topics: ReactElement)),

        // Original from React Router basic example, to be converted
        // <Route exact path="/" component={Home} />
        // <Route path="/about" component={About} />
        // <Route path="/topics" component={Topics} />
      )
    )

  }

}

Updated version.

Comments:

1. As before Route.props(homeRouteProps) (now commented out) would fail at compile with error value props is not a member of typings.reactLib.reactMod.ComponentType[T]. My suspect is that props from react-slinky-facade is not yet suited for this case.
2. I created an alternative RouteAlt component, that compiles but:
3. Once built the application does not behave as expected, all the Home, About and Topics components are displayed at the same time, while only one at a time should appear. I do not know if this has to do with:
   • RouteAlt non being correct
   • the fact that in RouteProps I am using children (than can accept a ReactElement) instead of component (which is used instead in the original example)

Now working, using render instead of component