I am facing the following issue in a R Shiny App built with shiny.fluent and shiny.router R packages.

我在使用Shiny.fluent和Shiny.router R包构建的R Shiny应用程序中面临以下问题。

On "home page", I have a href = route_link([...]) link to "test page". The link works, it brings me to the desired "test page". However, the left vertical navigation bar is not updated (it is still "Home" that is identified as the selected item with a different background color).

在“主页”上，我有一个指向“测试页”的href=route_link（[…]）链接。链接有效，它将我带到所需的“测试页面”。但是，左侧垂直导航栏不会更新（它仍然是“主页”，被标识为具有不同背景颜色的选定项目）。

Does anybody have an idea of what is going on ?

有人知道发生了什么事吗？

I spent some hours trying to fix it, but nothing so far has worked... I guess that with some javascript the problem could be easily solved, but my knowledge of js is really poor...

我花了几个小时试图修复它，但到目前为止没有任何效果。。。我想用一些javascript可以很容易地解决这个问题，但我对js的了解真的很差。。。

Any suggestion (js or not) to solve the issue is welcome !!!

欢迎任何建议（无论是否js）来解决这个问题！！！

Below minimal code :

最低代码以下：

library(dplyr)
library(glue)
library(shiny)
library(shiny.fluent)
library(shiny.router)

makeCard <- function(title, content, size = 12, style = "") {
  div(class = glue("card ms-depth-8 ms-sm{size} ms-xl{size}"),
      style = style,
      Stack(
        tokens = list(childrenGap = 5),
        Text(variant = "large", title, block = TRUE),
        content
      ))
}
makePage <- function (title, subtitle, contents) {
  tagList(div(
    class = "page-title",
    span(title, class = "ms-fontSize-32 ms-fontWeight-semibold", style =
           "color: #323130"),
    span(subtitle, class = "ms-fontSize-14 ms-fontWeight-regular", style =
           "color: #605E5C; margin: 14px;")
  ),
  contents)
}
navigation <- "navigation"

navigation <- Nav(
  groups = list(
    list(links = list(
      list(name = 'Home', url = '#!/', key = 'home', icon = 'Home'),
      list(name = 'Test', url = '#!/test', key = 'test', icon = 'AnalyticsReport')
      ))
  ),
  initialSelectedKey = 'home',
  styles = list(
    root = list(
      height = '100%',
      boxSizing = 'border-box',
      overflowY = 'auto'
    )
  )
)
layout <- function(mainUI){
  div(class = "grid-container",
      div(class = "sidenav", navigation),
      div(class = "main", mainUI)
  )
}

home_page <- makePage(
  "This is a Fluent UI app built in Shiny",
  "shiny.react + Fluent UI = shiny.fluent",
  uiOutput(paste0("changepage"))
)
test_page <- makePage(
  "This is a Fluent UI app built in Shiny",
  "shiny.react + Fluent UI = shiny.fluent",
  div(
    makeCard(
      "shiny.react makes it easy to use React libraries in Shiny apps.",
      div(
        Text("my test")
      ))
  )
)

router <- make_router(
  route("/", home_page),
  route("test", test_page))

# Add shiny.router dependencies manually: they are not picked up because they're added in a non-standard way.
shiny::addResourcePath("shiny.router", system.file("www", package = "shiny.router"))
shiny_router_js_src <- file.path("shiny.router", "shiny.router.js")
shiny_router_script_tag <- shiny::tags$script(type = "text/javascript", src = shiny_router_js_src)

ui <- fluentPage(
  layout(router$ui),
  tags$head(
    tags$link(href = "mystyle.css", rel = "stylesheet", type = "text/css"),
    shiny_router_script_tag
  ))

server <- function(input, output, session) {
  router$server(input, output, session)
  output$changepage <- renderUI({
    list(
      tags$ul(
### <<<< WHEN CLICKING ON THIS LINK, NAV BAR SELECTED ITEM IS NOT UPDATED <<<<<<<<<<<<<<<
        tags$li(a(href = route_link("test"), "Go to test page"))
      )
    )
  })
}

shinyApp(ui, server)

to display correctly, also needs www/mystyle.css

要正确显示，还需要www/mystyle.css

body {
  background-color: rgba(225, 223, 221, 0.2);
  min-height: 611px;
  margin: 0;
}
.page-title {
  padding: 52px 0px;
}
.card {
  background: #fff;
  padding: 28px;
  margin-bottom: 28px;
  border-radius: 2px;
  background-clip: padding-box;
}
.grid-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: 54px 1fr 45px;
  grid-template-areas: "header header" "sidenav main" "footer footer";
  height: 100vh;
}
.main {
  grid-area: main;
  background-color: #faf9f8;
  padding-left: 40px;
  padding-right: 32px;
  max-width: calc(100vw - 400px);
  max-height: calc(100vh - 100px);
  overflow: auto;
}
.sidenav {
  grid-area: sidenav;
  background-color: #fff;
  padding: 25px;
}

Hi @mazu.

嗨@妈祖。

The expected behavior you described is not a responsibility of shiny.router::route_link function, it only changes the page, any side effects in UI need to be implemented on your own.

你描述的预期行为不是shing.router:：route_link函数的责任，它只是更改页面，UI中的任何副作用都需要自己实现。

Please see this discussion how it can be implemented on server side using existing features of shiny.router and shiny.fluent.

请参阅本讨论如何使用shiny.router和shiny.fluent的现有功能在服务器端实现。