Problems with Kotlin react router dom element attribuute for binding a react component to URL

I'm currently working on a sample application to learn Kotlin/Js with the react library. When using the normal JSX syntax, a component can be set to be triggered when a specific URL hits using the BrowserRouter & Route API like below.

Main Component

Navigation Component as directed like in this youtube video

When attempting the above code in Kotlin, it resembles something like the screenshot below using the KotlinDSL

The main function where the component is rendered is shown below

However, that creates an Uncaught Error Exception like the one below

One of the reasons its also so difficult to debug is because my source maps dont work and hence most of my debugging errors are actually in Javascript. But anyways after searching up the javascript error, I found this article about the new Router update that disallows adding components as children.

As a result I tried to pass in the components through the element prop but there seems to be some incompatibility with them.

the element prop accepts an optional ReactNode? and I cant seem to convert my Function Component of type props to a ReactNode. When I try to pass in an optional ReactElement? by calling the create method, I also get an error.

I have been struggling with the Kotlin Documentation and can't seem to find enough examples of react-router implemented.

Can anyone help me out with how to pass in a Function COmponent into the element prop for the React Router?

It looks like you are trying to use the LEGACY compiler and the outdated React Router, I would recommend upgrading to the newer versions migration to IR compiler, but I'll leave an example for your case.

Looks like you should try using Outlet() component

You can pass a functional component to element as using.create()/.create { prop = propValue} and through the functioncreateElement(YourFunctionalComponent)

HashRouter {
        Routes {
            Route {
                path = "/"
                element = createElement(SomeFuctionalComponent1)
                children = Route {
                               path = "/path2"
                               element = SomeFuntionalComponent2.create()
                             }
            }
        }
    }

val SomeFuctionalComponent1 = FC<Props> {
    YourNavBarComponent()
    Outlet()
}

I also leave an example in case you decide to switch to the new version of React Router that I took from here mui showcases:

fun main() {
    val root = document.createElement(div)
        .also { document.body.appendChild(it) }

    createRoot(root)
        .render(App.create())
}

private val App = FC<Props> {
    val hashRouter = createHashRouter(
        routes = arrayOf(
            jso {
                path = "/"
                element = Showcases.create()
                errorElement = Error.create()
            },
        ),
    )


    RouterProvider {
        router = hashRouter
    }
    
}