为什么布局总是使用相同的初始组件

Question

如果我声明这样的组件：

case class Props(i: Int)

case class State(p: Props)

class Backend($: BackendScope[Props, State]) {

    def render(state: State) =
        <.div("Prop value is: " + state.p.i)
}

val component = ScalaComponent.builder[Props]("MyComponent")
  .initialStateFromProps(State(_))
  .backend(new Backend(_))
  .renderBackend
  .build

然后尝试在路由器布局中使用它：

    type MyLayout = (RouterCtl[Page], Resolution[Page]) => VdomElement

    def layout(): MyLayout = { (ctl, res) =>
        println("Getting layout: " + res.page)
        <.div(
            component(Props(res.page.asInstanceOf[PropPage].i))
        )
    }

    val routerConfig = {

    RouterConfigDsl[Page].buildConfig { dsl =>
        import dsl._

        (removeTrailingSlashes
            | dynamicRouteCT("#test" / int.caseClass[PropPage]) ~> dynRender(_ => <.div(""))
            )
            .notFound(redirectToPage(PropPage(-1))(Redirect.Replace))
            .renderWith(layout())
    }
}

def main(args: Array[String]): Unit = {
    Router(BaseUrl.fromWindowUrl(s => s), routerConfig.logToConsole)()
        .renderIntoDOM(dom.document.getElementById("root"))
}

当我打开初始测试页时，得到的div（“ Prop值为：-1”）符合预期。但是，如果我随后将网址更改为“＃test / 4”，则该网址仍只会呈现Prop值为-1的初始组件。

从控制台中我可以看到它每次都会创建一个新组件：

  

获取布局：PropPage（4）

但是它呈现初始组件。为什么会这样？