Kotlin/JS中React Router Dom的element属性绑定组件问题求助

核心实现方式 #

• 针对无参数的Function Component，直接用createElement包裹组件引用传入element属性，或者用FC简写包裹组件调用：
  先定义组件：

  val HomeScreen = FC<Props> {
      div {
          +"Home Page"
      }
  }
  

  路由配置示例：

  BrowserRouter {
      Routes {
          // 方式1：用createElement传入组件
          Route {
              path = "/"
              element = createElement(HomeScreen)
          }
          // 方式2：用FC简写直接调用组件
          Route(path = "/about", element = FC { AboutScreen() })
      }
  }
  

• 带参数的Function Component，需在createElement中传入对应props：
  定义带参组件：

  interface UserProps : Props {
      var userId: String
  }
  
  val UserScreen = FC<UserProps> { props ->
      div {
          +"User ID: ${props.userId}"
      }
  }
  

  路由配置示例：

  Route {
      path = "/user/:userId"
      element = createElement(UserScreen, UserProps(userId = useParams()["userId"] ?: ""))
  }
  

常见问题排查 #

• 类型转换报错：确保使用的kotlin-react-router-dom版本与React Router v6+匹配，旧版本绑定可能不支持element属性的正确类型映射。
• Source Map失效：在build.gradle.kts中开启source map配置：

  kotlin {
      js(IR) {
          browser {
              commonWebpackConfig {
                  sourceMaps = true
              }
          }
          binaries.executable()
      }
  }
  

关键注意点 #

• React Router v6+ 彻底移除了子组件传路由组件的写法，必须使用element属性，Kotlin DSL绑定严格遵循该规则。
• 不能直接传入组件引用，必须通过createElement或FC包裹生成合法的ReactNode实例。

内容的提问来源于stack exchange，提问作者Kotlin Monk