Appsilon's shiny.router - Official Release and New Features

Updated: November 1, 2022.
[UPDATE - December 2020] - A new version of the package was recently released. With it, we decided to write a new article on the library alongside a short interactive tutorial. You can read it here.
In web applications, routing is the process of using URLs to drive the user interface. Routing adds more possibilities and flexibility while building a complex and advanced web application, offering dividing the app into separated sections.
If you're an avid fan of R Shiny, then the shiny router package provides a solution to your routing problems. In this article, we'll share what's new with interactive code examples.
Image 1 - shiny.router demonstration
Table of contents:
- shiny router - New Features
- How to Pass Parameters to an App using GET URL Variables
- Operating Routing from the Server Side in shiny router
- Add Stylings to shiny router with Boostrap and Semantic UI
- Further Steps and Future Plans
Shiny Router - New Features
Contributing to open source is incorporated into Appsilon's mission. Last week we updated the i18n internationalization package, now it's time for the router. Our shiny.router package provides you with an easy solution on how to add routing to your Shiny application. Since the last release we managed to improve and add some great features to it. Find them on the list below!Routing moved fully to R assets
Previously the package was based on the external page.js library. Thanks to the use of a Shiny session object we moved it fully to R.Separated server for each bookmark
Now each bookmark can be isolated and fully working shiny app. The new feature allows you not only to separate UI for each bookmark - but you may also define its own server now. Just check the below example!library(shiny)
library(shiny.router)
# This creates UI for each page.
page <- function(title, content) {
div(
titlePanel(title),
p(content),
uiOutput("power_of_input")
)
}
# Part of both sample pages.
home_page <- page("Home page", "This is the home page!")
side_page <- page("Side page", "This is the side page!")
# Callbacks on the server side for the sample pages
home_server <- function(input, output, session) {
output$power_of_input <- renderUI({
HTML(paste(
"I display <strong>square</strong> of input and pass result to <code>output$power_of_input</code>: ",
as.numeric(input$int) ^ 2))
})
}
side_server <- function(input, output, session) {
output$power_of_input <- renderUI({
HTML(paste(
"I display <strong>cube</strong> of input and <strong>also</strong> pass result to <code>output$power_of_input</code>: ",
as.numeric(input$int) ^ 3))
})
}
# Create routing. We provide routing path, a UI as well as a server-side callback for each page.
router <- make_router(
route("home", home_page, home_server),
route("side", side_page, side_server)
)
# Create output for our router in main UI of Shiny app.
ui <- shinyUI(fluidPage(
shiny::sliderInput("int", "Choose integer:", -10, 10, 1, 1),
router_ui()
))
# Plug router into Shiny server.
server <- shinyServer(function(input, output, session) {
router(input, output, session)
})
# Run server in a standard way.
shinyApp(ui, server)

How to Pass Parameters to an App using GET URL Variables
library(shiny)
library(shiny.router)
# Main page UI.
home_page <- div(
titlePanel("Home page"),
p("This is the home page!"),
uiOutput("power_of_input")
)
# Creates routing. We provide routing path, a UI as well as a server-side callback for each page.
router <- make_router(
route("/", home_page, NA)
)
# Create output for our router in main UI of Shiny app.
ui <- shinyUI(fluidPage(
shiny::sliderInput("int", "Choose integer:", -10, 10, 1, 1),
router_ui()
))
# Plug router into Shiny server.
server <- shinyServer(function(input, output, session) {
router(input, output, session)
component <- reactive({
if (is.null(get_query_param()$add)) {
return(0)
}
as.numeric(get_query_param()$add)
})
output$power_of_input <- renderUI({
HTML(paste(
"I display input increased by <code>add</code> GET parameter from app url and pass result to <code>output$power_of_input</code>: ",
as.numeric(input$int) + component()))
})
})
# Run server in a standard way.
shinyApp(ui, server)

Operating Routing from the Server Side in a shiny router
route_link
- function for changing URL for bookmark by adding hashbang (#!) prefixchange_page
- function for changing the currently displayed pageget_page
- function to extract the "hash" part of the URLis_page
- a function that verifies if the current page was passed successfully.
library(shiny)
library(shiny.router)
# This generates menu in user interface with links.
menu <- (
tags$ul(
tags$li(a(class = "item", href = route_link("home"), "Home page")),
tags$li(a(class = "item", href = route_link("side"), "Side page"))
)
)
# This creates UI for each page.
page <- function(title, content) {
div(
menu,
titlePanel(title),
p(content),
actionButton("switch_page", "Click to switch page!")
)
}
# Both sample pages.
home_page <- page("Home page", uiOutput("current_page"))
side_page <- page("Side page", uiOutput("current_page"))
# Creates router. We provide routing path, a UI as
# well as a server-side callback for each page.
router <- make_router(
route("home", home_page, NA),
route("side", side_page, NA)
)
# Create output for our router in main UI of Shiny app.
ui <- shinyUI(fluidPage(
router_ui()
))
# Plug router into Shiny server.
server <- shinyServer(function(input, output, session) {
router(input, output, session)
output$current_page <- renderText({
page <- get_page(session)
sprintf("Welcome on %s page!", page)
})
observeEvent(input$switch_page, {
if (is_page("home")) {
change_page("side")
} else if (is_page("side")) {
change_page("home")
}
})
})
# Run server in a standard way.
shinyApp(ui, server)

Add Stylings to the shiny router with Boostrap and Semantic UI
You can suppress Bootstrap dependency on the specified bookmark. You can switch between Bootstrap and Semantic UI pages or disable styles. This is especially useful when using both Bootstrap and semantic-UI frameworks in one application.
library(shiny)
library(shiny.router)
library(shiny.semantic)
# Both sample pages.
bootstrap_page <- fluidPage(
sidebarLayout(
sidebarPanel(
sliderInput("obs_bootstrap",
NULL,
min = 0,
max = 100,
value = 50,
step = 1)
),
mainPanel(
p("Selected value:"),
textOutput("value_bootstrap")
)
)
)
semanticui_page <- semanticPage(
slider_input("obs_semantic",
min = 0,
max = 100,
value = 50,
step = 1),
p("Selected value:"),
textOutput("value_semantic")
)
# Creates router. We provide routing path, a UI as
# well as a server-side callback for each page.
router <- make_router(
route("bootstrap", bootstrap_page),
route("semantic", semanticui_page),
page_404 = page404("You opened non existing bookmark!")
)
# Create output for our router in main UI of Shiny app.
ui <- shinyUI(
tagList(
tags$head(
singleton(disable_bootstrap_on_bookmark("semantic"))
),
router_ui()
)
)
# Plug router into Shiny server.
server <- shinyServer(function(input, output, session) {
router(input, output, session)
output$value_bootstrap <- renderText(input$obs_bootstrap)
output$value_semantic <- renderText(input$obs_semantic)
})
# Run server in a standard way.
shinyApp(ui, server)

How to Get shiny router
