Kotlin For React，router的使用

kotlin-react-router-dom

是JetBrains官方为支持ReactRouter提供的包。实现单页面路由功能。

引入包

在build.gradle文件中添加如下代码：

implementation("org.jetbrains:kotlin-react-router-dom:5.1.2-pre.113-kotlin-1.4.0")

使用

在kotlin中使用ReactRouter与React中没有什么不同，先看官方提供的代码示例：

interface IdProps : RProps {
          
   
    var id: Int
}
class RootComponent : RComponent<RProps, RState>() {
          
   
    override fun RBuilder.render() {
          
   
        hashRouter {
          
    // or "browserRouter"
            switch {
          
   
                route("/", IndexComponent::class, exact = true)
                route("/login", strict = true) {
          
   
                    login(providers = listOf("plain", "facebook"))
                    a(href = "#/") {
          
   
                        +"Back"
                    }
                }
                route<IdProps>("/user/:id") {
          
    props ->
                    div {
          
   
                        +"User id: ${
            
     props.match.params.id}"
                    }
                }
                redirect(from = "/redirect", to = "/redirected")
            }
        }
    }
}

最外层包裹一个hashRouter 或者browserRouter 组件，关于它们的区别稍后再说。hashRouter 内部添加了switch组件，route组件是用来路由到具体的路径，如果需要获取路径中的参数，可以用:id 做占位符，然后通过props.match.params.id进行访问， redirect是重定向该路径。总体使用形式有点像Switch语法。

开始一个Demo

1. 新建一个App.kt文件，创建一个App组件，并在入口处注册。

fun main() {
          
   
    window.onload = {
          
   
        render(document.getElementById("root")) {
          
   
            child(App::class) {
          
   }
        }
    }
}

class App(props: RProps) : RComponent<RProps, RState>(props) {
          
   
    override fun RBuilder.render() {
          
   
        div {
          
   
            a(href = "#/"){
          
   +"Home"}
        }
        div {
          
   
            a(href = "#/p2"){
          
   +"PAGE2"}
        }
        div {
          
   
            a(href = "#/p3"){
          
   +"PAGE3"}
        }
        hashRouter {
          
   
            switch {
          
   
                route("/",exact = true){
          
   
                    div {
          
   
                        +"Home页面"
                    }
                }
                route("/p2"){
          
   
                    div {
          
   
                        +"p2页面"
                    }
                }
                route("/p3"){
          
   
                    div {
          
   
                        +"p3页面"
                    }
                }
            }
        }
    }
}

2. 运行效果

由上面代码应该注意到它的url为什么和常见的url不一样，为什么会多一个**#** 符号，这是因为hashRouter使用的是URL的hash部分，以保证url和UI的一致性。并且它不支持location.key 和location.state。如果我们切换成**browserRouter ** 呢？

出现了Connot GET /p2的错误。这是因为browserRouter 的路由方式和浏览器一样，他会直接调用浏览器请求/p2链接，而由于我们这是单页面应用，服务器资源只存在一个index.html页面，自然就无法请求到相应的数据，那我们该如何解决这个问题呢。只需要在Nginx服务器配置中加上：

location / {
          
   
     ··· ···
     try_files $uri /index.html;
     ··· ···
}