Fable.Lit Elmish如何捕获无哈希的URL变更事件？

以下是一个基础的Fable.Lit Elmish应用代码：

module App
open Elmish
open Elmish.Navigation
open Lit

type Route =
    | Contract
    | Product
    | Chart

type Model = {
    Route_ : Route option }

type Msg = ...

let init route_ = {Route_ = route_}, Cmd.none

let update msg model = ...

let view (model:Model) dispatch = 
    match model.Route_ with
    | None -> ...
    | Some Contract -> ...
    | Some Product -> ...
    | Some Chart -> ...

open Lit.Elmish
open Elmish.UrlParser

let route = oneOf [ 
    map Product (s "product")
    map Contract (s "contract")
    map Chart (s "chart") ]

let urlUpdate (route_: Option<Route>) model = 
    printf "urlUpdate"
    model, Cmd.none

Program.mkProgram init update view
// |> Program.toNavigable (parseHash route) urlUpdate
|&gt; Program.toNavigable (parsePath route) urlUpdate
|&gt; Program.withLit "my-app"
|&gt; Program.run

当使用parseHash时，修改浏览器URL（如http://host/#product）并回车，urlUpdate会被正常调用；但切换到parsePath后，修改不带#的URL会触发页面重载，urlUpdate始终不会被执行。请问如何正确捕获手动或程序化的URL变更？

解决方法 #

1. 配置服务器端路由Fallback #

parsePath依赖HTML5 History API实现前端路由，直接修改URL回车会触发浏览器向服务器发送HTTP请求，默认情况下服务器会返回404（因为找不到对应路径的文件），同时导致页面重载。因此必须配置服务器，将所有非静态资源的请求都转发到应用入口文件（通常是index.html）：

• Vite：在vite.config.js中添加配置：

  export default {
    server: {
      fallback: 'index.html'
    }
  }
  

• Netlify：在项目根目录创建_redirects文件，写入：

  /* /index.html 200
  

• Nginx：在配置中添加重写规则：

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

2. 前端导航使用Elmish路由命令 #

应用内部的导航必须避免使用原生<a>标签的默认跳转行为，改用Elmish.Navigation提供的命令处理，否则点击链接依然会触发页面重载：

// Lit视图中自定义导航链接的示例
html $"""
<div>
  <a href="/product" @click={fun e ->
      e.preventDefault() // 阻止浏览器默认跳转
      dispatch (Navigation.NewUrl "/product") // 通过Elmish路由处理
  }>产品页面</a>
  <a href="/contract" @click={fun e ->
      e.preventDefault()
      dispatch (Navigation.NewUrl "/contract")
  }>合同页面</a>
</div>
"""

这样处理后，导航会完全由前端路由接管，不会触发页面重载，urlUpdate也会正常被调用。

3. 处理手动修改URL的场景 #

当用户手动修改URL并回车时，服务器会将请求转发到index.html，页面重新加载。此时Elmish的init函数会收到当前URL解析后的route_参数，你可以在init中初始化对应状态；同时urlUpdate会在应用启动时被调用一次，用于同步路由和模型状态，确保页面渲染正确的内容。

内容的提问来源于stack exchange，提问作者Franco Tiveron