How to create Routes on Kotlin/Js

Question

My app uses this implementation:

library("org.jetbrains.kotlin-wrappers:kotlin-wrappers-bom:0.0.1-pre.282-kotlin-1.6.10")

I decided to gradually increase the library version by making +1. I have reached version 1.0.0-pre.291, fixed some bugs and innovations in the versions. But when switching to 1.0.0-pre.292, I swear at the Routers and I don't understand how to fix it. Please help me, I want to move gradually, and not immediately to the current version, since in this case I have several hundred errors. And with this approach, I correct them gradually. Swears at the ignorance of the BrowserRouter class, as well as Navigate, attr.path and attr.element.

//import react.router.dom.BrowserRouter
import kotlinx.browser.window
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.await
import kotlinx.coroutines.launch
import org.w3c.fetch.RequestInit
import react.dom.render
import react.redux.provider
import react.router.dom.BrowserRouter
import serviceRegistry.SERVICE_REGISTRY_ENDPOINT
import stateManagement.store
import structure.pageComponent
import transport.utils.decodeURIComponent
import web.dom.document
import wrappers.d3.d3Selection
import kotlin.coroutines.CoroutineContext


private class Application : CoroutineScope {
    override val coroutineContext: CoroutineContext = Job()

    fun start() {
        // TODO подумать над тем, чтобы упавший сервис регистрации не блокировал отрисовку приложения
        launch {
            setServiceRegistryAddress()
            renderApp()
        }
    }

    private suspend fun setServiceRegistryAddress() {
        val response = window.fetch(
            "/$SERVICE_REGISTRY_ENDPOINT", RequestInit(method = "GET")
        ).await()
        val message = response.text().await()
        MicroserviceApplication.fromStringAddress(decodeURIComponent(message))
    }

    private fun renderApp() {
        render(document.getElementById("react-app") ?: return) {
            BrowserRouter {
                provider(store) {
                        pageComponent()
                }
            }
        }
    }

}


fun main() {
    // hack to import module for change of multiple attributes (.attrs { })
    d3Selection
    val application = Application()
    application.start()
}

package structure

import kotlinx.browser.localStorage
import kotlinx.browser.sessionStorage
import kotlinx.css.*
import pages.login.loginSection.Login
import pages.releases.releasePage
import pages.sections.analytic.analyticsPage
import pages.sections.decisionTree.decisionSection
import pages.sections.documents.documentsPage
import pages.sections.journalLogs.features.journalLogsPage
import pages.sections.layout.*
import pages.sections.model.model
import pages.sections.notFound.notFoundPage
import pages.sections.notifications.popUpNotifications
import pages.sections.projects.saveProjectKeyToSessionStorage
import pages.sections.projectsEmz.projectsEmz
import pages.sections.queries.*
import pages.sections.settings.settingsFile.fileManagerPage
import pages.sections.settings.settingsLayout
import pages.sections.summary.summary
import pages.sections.users.usersPage.UsersPage
import pages.tokenMonitor.useTokenMonitor
import react.*
import react.redux.useDispatch
import react.router.*
import redux.RAction
import scope.Section
import stateManagement.*
import stateManagement.State
import structure.modals.modal
import styled.css
import styled.styledDiv
import utils.auth.OS
import utils.auth.getOS
import utils.getProjectKey
import utils.hooks.useWatchingCleanup
import utils.hooks.voiceAssistant.useMicrophoneListener
import utils.hooks.voiceAssistant.useVoiceAssistantNavigator
import utils.savedProjectStorageKey
import utils.savedUserStorageKey
import wrappers.leafleth.leafletMarkerCluster

val pageComponent = memo(fc {

    val dispatch = useDispatch<RAction, State>()
    val navigate = useNavigate()
    val location = useLocation()

    useWatchingCleanup()
    useMicrophoneListener()
    useVoiceAssistantNavigator()
    useTokenMonitor()

    useEffect {
        cleanup {
            localStorage.setItem(savedProjectStorageKey, sessionStorage.getItem(savedProjectStorageKey) ?: "")
        }
    }

    useEffectOnce {
        if (getOS() == OS.LINUX) {
            dispatch(dcLogin())
        }

        val userID = localStorage.getItem(savedUserStorageKey) ?: ""
        if (userID.isNotEmpty()) {
            dispatch(getUserById(userID.toLong()))
            dispatch(ChangeAppInitStatus(true))
        }
        val projectKey = localStorage.getItem(savedProjectStorageKey) ?: ""
        saveProjectKeyToSessionStorage(projectKey)
        val routes = listOf(Section.Users.path, Section.Projects.path, "/login", "/")
        if (location.pathname !in routes) {
            if (getProjectKey().isEmpty()) navigate(Section.Projects.path)
            else dispatch(initializeKeyspace())
        }
    }

    leafletMarkerCluster // Необходимо для корректного распределения кастомных отметок на карте, находящихся в одинаковых координатах


    val loginPage = createElement<Props> {
        Login()
    }

    val createTemplatesPage = createElement<Props> {
        buildPage(templatesPage).withLayout(mainSectionLayout)
    }

    val createQueriesPage = createElement<Props> {
        buildPage(queriesPage).withLayout(mainSectionLayout)
    }

    val createSnapshotsPage = createElement<Props> {
        buildPage(snapshotsPage).withLayout(mainSectionLayout)
    }

    val createSummary = createElement<Props> {
        buildPage(summary).withLayout(summaryLayout)
    }

    val createModel = createElement<Props> {
        buildPage(model).withLayout(twoPanelsLayout)
    }

    val createProjectsEmz = createElement<Props> {
        buildPage(projectsEmz).withLayout(mainSectionLayout)
    }

    val createTemplates = createElement<Props> {
        buildPage(localTemplates).withLayout(twoPanelsLayout)
    }

    val createQueries = createElement<Props> {
        buildPage(queries).withLayout(twoPanelsLayout)
    }

    val createSnapshots = createElement<Props> {
        buildPage(snapshots).withLayout(twoPanelsLayout)
    }


    val releasesPage = createElement<Props> { buildPage(releasePage).withLayout(mainSectionLayout) }

    val createNotFound = createElement<Props> { buildPage(notFoundPage).withLayout(mainSectionLayout) }

    val usersPage = createElement<Props> { buildPage(UsersPage).withLayout(mainSectionLayout) }

    val documentsPage = createElement<Props> { buildPage(documentsPage).withLayout(mainSectionLayout) }

    val fileManagerPage = createElement<Props> {
        settingsLayout { fileManagerPage() }
    }

    val analyticsPage = createElement<Props> {
        settingsLayout { analyticsPage() }
    }

    val journalLogsPage = createElement<Props> {
        settingsLayout { journalLogsPage() }
    }

    val iconDesignerPage = createElement<Props> {
        settingsLayout {
            styledDiv {
                css {
                    height = 100.pct
                    display = Display.flex
                    justifyContent = JustifyContent.center
                    alignItems = Align.center
                }
                styledDiv { +"В разработке" }
            }
        }
    }

    val decisionTreePage = createElement<Props> {
        buildPage(decisionSection).withLayout(decisionTreeLayout)
    }

    val indexPage = createElement<Props> {
        Navigate {
            attrs.to = "/login"
        }
    }

    modal()
    popUpNotifications()

    Routes {
        Route {
            attrs.path = "/login"
            attrs.element = loginPage
        }
        Route {
            attrs.index = true
            attrs.element = indexPage
        }
        Route {
            attrs.path = Section.DecisionTree.path
            attrs.element = decisionTreePage
        }
        Route {
            attrs.path = Section.Summary.path
            attrs.element = createSummary
        }
        Route {
            attrs.path = Section.Model.path
            attrs.element = createModel
        }
        Route {
            attrs.path = Section.Templates.path
            attrs.element = createTemplates
        }
        Route {
            attrs.path = Section.Snapshots.path
            attrs.element = createSnapshots
        }
        Route {
            attrs.path = Section.Queries.path
            attrs.element = createQueries
        }
        Route {
            attrs.path = Section.TemplatesPage.path
            attrs.element = createTemplatesPage
        }
        Route {
            attrs.path = Section.QueriesPage.path
            attrs.element = createQueriesPage
        }
        Route {
            attrs.path = Section.SnapshotsPage.path
            attrs.element = createSnapshotsPage
        }
        Route {
            attrs.path = Section.Releases.path
            attrs.element = releasesPage
        }
        Route {
            attrs.path = Section.Projects.path
            attrs.element = createProjectsEmz
        }
        Route {
            attrs.path = Section.Users.path
            attrs.element = usersPage
        }
        Route {
            attrs.path = Section.Documents.path
            attrs.element = documentsPage
        }
        Route {
            attrs.path = Section.FileManager.path
            attrs.element = fileManagerPage
        }
        Route {
            attrs.path = Section.Analytics.path
            attrs.element = analyticsPage
        }
        Route {
            attrs.path = Section.JournalLogs.path
            attrs.element = journalLogsPage
        }
        Route {
            attrs.path = Section.IconDesigner.path
            attrs.element = iconDesignerPage
        }
        Route {
            attrs.path = "/api/logout"
            attrs.element = null
        }
        Route {
            attrs.path = "*"
            attrs.element = createNotFound
        }
    }
})