I would like to render components according to route in kotlin-react.
I am getting the error: "Unresolved references" to exact, path and element on Route
To solve that I tried this:
install react-router-dom
npm i react-router-dom
in my component i try to use Route:
import react.*
import react.dom.*
import react.router.dom.*
import kotlin.browser.*
import kotlinx.browser.document
fun main() {
render(document.getElementById("root")) {
BrowserRouter {
div {
Route(exact = true, path = "/", render = { Home() })
Route(path = "/about", render = { About() })
}
}
}
}
fun RBuilder.Home() = div {
h1 { +"Home" }
p { +"Welcome to the homepage." }
}
fun RBuilder.About() = div {
h1 { +"About" }
p { +"This is the about page." }
}
in build.gradle.kts i try to import packages to use react-dom:
val jsMain by getting {
dependencies {
implementation("org.jetbrains.kotlin-wrappers:kotlin-react:18.2.0-pre.346")
implementation("org.jetbrains.kotlin-wrappers:kotlin-react-dom:18.2.0-pre.346")
implementation("org.jetbrains.kotlin-wrappers:kotlin-emotion:11.9.3-pre.346")
}
}
But still it is giving the above error.