如何在ShinyDashboard中点击刷新按钮后保持当前tabItem面板

这个问题的核心是session$reload()会重置Shiny应用的所有输入状态，包括侧边栏选中的Tab，所以默认会回到第一个Tab。要实现刷新后停留在当前Tab，我们需要在刷新前保存当前Tab的状态，刷新后再恢复这个状态。下面是具体的解决方案：

修改思路 #

1. 保存当前Tab状态：点击刷新按钮时，把当前选中的Tab名称存入URL的hash部分（URL中#后面的内容），因为刷新页面后URL的hash会被保留。
2. 恢复Tab状态：应用初始化时，读取URL的hash部分，将侧边栏的选中项设置为对应的Tab。

修改后的完整代码 #

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = p("Title")), 
  dashboardSidebar(
    skin = 'light', 
    collapsed = TRUE, 
    tags$head(tags$style(HTML('.content-wrapper { height: 1500px !important;}'))), 
    sidebarMenu( 
      id = "sidebarMenu", 
      menuItem(text = p(style = 'sidebar_menu_li',"Screen 1", style = "font-size: 1.25em;"), tabName = "panel_1"), 
      menuItem(text = p(style = 'sidebar_menu_li',"Screen 2", style = "font-size: 1.25em;"), tabName = "panel_2"), 
      menuItem(text = p(style = 'sidebar_menu_li',"Screen 3", style = "font-size: 1.25em;"), tabName = "panel_3"), 
      menuItem(text = p(style = 'sidebar_menu_li',"Screen 4", style = "font-size: 1.25em;"), tabName = "panel_4")
    ) 
  ), 
  dashboardBody( 
    tabItems( 
      tabItem(tabName = "panel_1" ,h1("Title 1")), 
      tabItem(tabName = 'panel_2',h1("Title 2")), 
      tabItem(tabName = 'panel_3',h1("Title 3")), 
      tabItem(tabName = "panel_4",h1("Title 4"), actionButton("submit1" ,"Submit", icon("refresh"), class = "btn btn-primary"))
    ) 
  ) 
)

server <- function(input, output, session) {
  
  # 初始化时恢复之前选中的Tab
  observe({
    # 获取URL的hash部分
    hash <- session$clientData$url_hash
    if (!is.null(hash) && nchar(hash) > 1) {
      # 去掉开头的#符号
      active_tab <- substring(hash, 2)
      # 验证Tab名称是否有效，避免非法值导致错误
      if (active_tab %in% c("panel_1", "panel_2", "panel_3", "panel_4")) {
        updateTabItems(session, "sidebarMenu", selected = active_tab)
      }
    }
  }, priority = 10) # 设置高优先级，确保先执行这个逻辑

  observeEvent(input$submit1, {
    # 获取当前选中的Tab
    current_tab <- input$sidebarMenu
    # 更新URL的hash为当前Tab名称
    updateQueryString(paste0("#", current_tab), mode = "replace")
    # 执行页面刷新
    session$reload()
  })
}

shinyApp(ui, server)

关键部分解释 #

• 保存状态：在observeEvent(input$submit1)中，我们通过input$sidebarMenu获取当前选中的Tab，然后用updateQueryString将其添加到URL的hash中。mode = "replace"确保不会在浏览器历史中添加新记录。
• 恢复状态：初始化的observe块会读取URL的hash，提取出Tab名称后，用updateTabItems设置侧边栏的选中项。设置priority = 10是为了保证这个恢复逻辑在其他业务逻辑之前执行，确保Tab能被正确选中。

这样修改后，点击Screen 4的Submit按钮刷新页面，就会自动停留在Screen 4面板了。

内容的提问来源于stack exchange，提问作者Laura