root cljs app defining DataBrowserRouter from react-router

client.cljs

(ns crudis.client
  (:require
    ["react-dom" :as rdom]
    ["react-dom/client" :refer [createRoot]]
    ["react-router-dom" :refer [DataBrowserRouter Route]]
    [crudis.util.helix :refer [defnc]]
    [crudis.ui.root :as root]
    [crudis.ui.routes.countries :as countries]
    [helix.core :refer [$]]
    [helix.dom :as d]
    ))

(helix.core/defcomponent error-boundary
  (constructor
    [this that]
    (set! (.-state this) #js {:error nil}))

  ^:static
  (getDerivedStateFromError
    [this error]
    #js {:error error}
    )

  (render
    [this props state]
    (if-let [error (.-error ^js state)]
      (if (:on-error-component props)
        ($ (:on-error-component props))
        (d/div (pr-str error)))
      (:children props))))

(defnc App
  []
  ($ error-boundary
     ($ DataBrowserRouter
        ($ Route {:path "/" :element ($ root/Root)}
           ($ Route {:path "countries"
                     :element ($ countries/CountriesView)
                     :loader countries/loader})
           ($ Route {:path "departments" :element ($ root/DepartmentsView)})
           ($ Route {:path "dependents" :element ($ root/DependentsView)})
           ($ Route {:path "employees" :element ($ root/EmployeesView)})
           ($ Route {:path "jobs" :element ($ root/JobsView)})
           ($ Route {:path "locations" :element ($ root/LocationsView)})
           ($ Route {:path "regions" :element ($ root/RegionsView)})))))

;; aka main
(defn ^:export entry-point []
  (.render (createRoot (js/document.getElementById "root"))
           ($ App)))

(comment
  )