Fix #4 using reloadDocument = TRUE. Update docs accordlingly. Also make key argument accessible in Route().

Author: lgnbhl

R/components.R

@@ -45,23 +45,26 @@ MemoryRouter <- component('MemoryRouter')
 
 #' Route
 #' 
+#' \url{https://reactrouter.com/6.30.0/components/route}
+#' 
 #' Internally the `element` is wrapped in a `shiny::div()` 
 #' with a UUID key so, in case R shiny is used, shiny can differentiate 
 #' each element.
 #' 
 #' @rdname Route
 #' @param ... Props to pass to element.
-#' @param element element with UUID key wrap in a `shiny::div()`.
+#' @param element element wrapped in a `shiny::div()`.
+#' @param key By default uses a UUID key in the `div()` of the `element` arg.
 #' @return A Route component.
 #' @export
-Route <- function(..., element) {
+Route <- function(..., element, key = uuid::UUIDgenerate()) {
   shiny.react::reactElement(
     module = "react-router-dom",
     name = "Route",
     props = shiny.react::asProps(
       ..., 
       element = shiny::div(
-        key = uuid::UUIDgenerate(), 
+        key = key, 
         element
       )
     ),
@@ -70,12 +73,28 @@ Route <- function(..., element) {
 }
 
 #' Link
+#' 
+#' The `reloadDocument` can be used to skip client side routing and let the 
+#' browser handle the transition normally (as if it were an <a href>). In 
+#' React Router v6 `reloadDocument` if `FALSE`, but given shiny behavior, the
+#' `Link()` function makes it `TRUE` by default.
+#' 
 #' @rdname Link
-#' @description \url{https://reactrouter.com/6.30.0/components/link}
 #' @param ... Props to pass to element.
+#' @param reloadDocument Boolean. Default TRUE. Let browser handle the transition normally 
 #' @return A Link component.
 #' @export
-Link <- component('Link')
+Link <- function(..., reloadDocument = TRUE) {
+  shiny.react::reactElement(
+    module = "react-router-dom",
+    name = "Link",
+    props = shiny.react::asProps(
+      ..., 
+      reloadDocument = reloadDocument
+    ),
+    deps = reactRouterDependency()
+  )
+}
 
 #' Navigate
 #' @rdname Navigate
@@ -86,12 +105,29 @@ Link <- component('Link')
 Navigate <- component('Navigate')
 
 #' NavLink
+#' 
+#' The `reloadDocument` can be used to skip client side routing and let the 
+#' browser handle the transition normally (as if it were an <a href>). In 
+#' React Router v6 `reloadDocument` if `FALSE`, but given shiny behavior, the
+#' `NavLink()` function makes it `TRUE` by default.
+#' 
 #' @rdname NavLink
-#' @description \url{https://reactrouter.com/6.30.0/components/nav-link}
 #' @param ... Props to pass to element.
+#' @param reloadDocument Boolean. Default TRUE. Let browser handle the transition normally 
 #' @return A NavLink component.
 #' @export
-NavLink <- component('NavLink')
+NavLink <- function(..., reloadDocument = TRUE) {
+  shiny.react::reactElement(
+    module = "react-router-dom",
+    name = "NavLink",
+    props = shiny.react::asProps(
+      ..., 
+      reloadDocument = reloadDocument
+    ),
+    deps = reactRouterDependency()
+  )
+}
+
 
 #' Outlet
 #' @rdname Outlet

R/inputs.R

@@ -1,36 +1,56 @@
-input <- function(name) {
-  function(inputId, ...) {
+input_link <- function(name) {
+  function(inputId, ..., reloadDocument = TRUE) {
     checkmate::assert_string(inputId)
     shiny.react::reactElement(
       module = "@/reactRouter",
       name = name,
-      props = shiny.react::asProps(inputId = inputId, ...),
+      props = shiny.react::asProps(inputId = inputId, ..., reloadDocument = reloadDocument),
       deps = reactRouterDependency()
     )
   }
 }
 
 #' Link
 #' @rdname Link
-#' @description \url{https://reactrouter.com/en/main/components/link}
+#' @description \url{https://reactrouter.com/6.30.0/components/link}
 #' @param ... Props to pass to element.
 #' @param inputId ID of the component.
+#' @param reloadDocument Boolean. Default TRUE. Let browser handle the transition normally 
 #' @param session Object passed as the `session` argument to Shiny server.
 #' @export
-Link.shinyInput <- input('Link')
+Link.shinyInput <- function(inputId, ..., reloadDocument = TRUE) {
+  checkmate::assert_string(inputId)
+  checkmate::assert_logical(reloadDocument)
+  shiny.react::reactElement(
+    module = "@/reactRouter",
+    name = "Link",
+    props = shiny.react::asProps(inputId = inputId, ..., reloadDocument = reloadDocument),
+    deps = reactRouterDependency()
+  )
+}
 
 #' @rdname Link
 #' @export
 updateLink.shinyInput <- shiny.react::updateReactInput
 
 #' NavLink
 #' @rdname NavLink
-#' @description \url{https://reactrouter.com/en/main/components/nav-link}
+#' @description \url{https://reactrouter.com/6.30.0/components/nav-link}
 #' @param ... Props to pass to element.
 #' @param inputId ID of the component.
+#' @param reloadDocument Boolean. Default TRUE. Let browser handle the transition normally 
 #' @param session Object passed as the `session` argument to Shiny server.
 #' @export
-NavLink.shinyInput <- input('NavLink')
+NavLink.shinyInput <- function(inputId, ..., reloadDocument = TRUE) {
+  checkmate::assert_string(inputId)
+  checkmate::assert_logical(reloadDocument)
+  shiny.react::reactElement(
+    module = "@/reactRouter",
+    name = "NavLink",
+    props = shiny.react::asProps(inputId = inputId, ..., reloadDocument = reloadDocument),
+    deps = reactRouterDependency()
+  )
+}
 
 #' @rdname NavLink
 #' @export

inst/examples/dynamic-segment/app.R

@@ -124,19 +124,15 @@ ui <- reactRouter::HashRouter(
 
 server <- function(input, output, session) {
 
-  # issue #4: https://github.com/lgnbhl/reactRouter/issues/4
-  # NOT NECESSARY AS WE NEED ONLY PROJECT ID, WORKING WITHOUT RELOADING THE SESSION
-  # observeEvent(c(input$home, input$overview, input$analysis), {
-  #   session$reload()
-  # })
-  
+  url_hash <- shiny::reactiveVal(value = NA)
   url_hash_cleaned <- shiny::reactiveVal(value = NA)
 
   # update reactive values based on url hash
   shiny::observe({
     current_url_hash <- sub("#/", "", session$clientData$url_hash)
     # print(current_url_hash)
-
+    url_hash(current_url_hash)
+    
     # extract numeric id from current url hash
     current_url_hash_cleaned <- as.integer(stringr::str_extract(current_url_hash, "\\d+"))
     # print(current_url_hash_cleaned)
@@ -185,6 +181,10 @@ server <- function(input, output, session) {
       class = "p-3",
       card(
         card_header("Session and data"),
+        tags$p(
+          tags$b("Current hash url: "),
+          paste0("'", url_hash(), "'")
+        ),
         tags$p(
           tags$b("Current cleaned hash url: "),
           paste0("'", url_hash_cleaned(), "'")
@@ -235,6 +235,10 @@ server <- function(input, output, session) {
       class = "p-3",
       card(
         card_header("Session and data"),
+        tags$p(
+          tags$b("Current hash url: "),
+          paste0("'", url_hash(), "'")
+        ),
         tags$p(
           tags$b("Current cleaned hash url: "),
           paste0("'", url_hash_cleaned(), "'")

man/Link.Rd

@@ -90,15 +90,13 @@ reactRouter::HashRouter(
     nav_item(
       reactRouter::NavLink(
         "Home", 
-        to = "/", 
-        style = JS('({isActive}) => { return isActive ? {color: "red", textDecoration: "none"} : {}; }')
+        to = "/"
       )
     ),
     nav_item(
       reactRouter::NavLink(
         "Analysis", 
-        to = "/analysis",
-        style = JS('({isActive}) => { return isActive ? {color: "red", textDecoration: "none"} : {}; }')
+        to = "/analysis"
       )
     ),
     reactRouter::Routes(
@@ -326,17 +324,14 @@ reactRouter::HashRouter(
 
 A minimal example using dynamic segments, i.e. using `Route(to = ":id/*")`.
 
-If you want to observe the `url_hash` of the shiny session, you need to use a workaround ([issue #4](https://github.com/lgnbhl/reactRouter/issues/4)) to get the correct `url_hash` path by reloading the session when the user click on a link, as showed below:
-
 ```r
 library(shiny)
 library(reactRouter)
 library(bslib)
 
 ui <- HashRouter(
   bslib::page(
-    reactRouter::Link.shinyInput(
-      inputId = "home",
+    Link(
       to = "/", 
       h3("reactRouter with dynamic routes", class = "m-3"),
       style = "text-decoration: none; color: black"
@@ -346,28 +341,26 @@ ui <- HashRouter(
         path = "/",
         element = div(
           # tags$a() necessary to observe `url_hash` in session
-          tags$a(
-            href = "#/project/1/overview",
+          NavLink(
+            to = "project/1/overview",
             "Project 1"
           ),
           tags$br(),
-          tags$a(
-            href = "#/project/2/overview", # go directly to overview
+          NavLink(
+            to = "project/2/overview",
             "Project 2"
           )
         )
       ),
       Route(
         path = "project/:id/*", 
         element = div(
-          NavLink.shinyInput(
-            inputId = "overview",
+          NavLink(
             to = "overview",
             "Overview"
           ),
           tags$br(),
-          NavLink.shinyInput(
-            inputId = "analysis",
+          NavLink(
             to = "analysis",
             "Analysis"
           ),
@@ -390,11 +383,6 @@ ui <- HashRouter(
 
 server <- function(input, output, session) {
 
-  # Necessary to update `url_hash` to get "" (homepage), "1/analysis" and "2/analysis"
-  observeEvent(c(input$home, input$overview, input$analysis), {
-    session$reload()
-  })
-  
   url_hash <- shiny::reactiveVal(value = NA)
 
   # update reactive values based on url hash