Svelte Router SPA生产环境动态生成的路由链接无法访问问题

核心原因 #

该问题本质是动态生成的链接未被Svelte Router SPA的前端路由逻辑接管，触发了浏览器原生页面跳转请求，而生产环境服务端不存在对应路径的静态资源，因此返回404；手动编写的链接默认使用了官方提供的<Link>组件，走前端路由逻辑，因此访问正常。

具体修复方案 #

• 统一使用Svelte Router SPA的<Link>组件生成动态链接
  不要使用原生<a>标签直接拼接href属性，将动态获取的url字段传入<Link>的to属性即可，示例如下：

  <!-- 错误写法（触发原生跳转） -->
  <a href={`/prod/${item.url}`}>{item.name}</a>
  
  <!-- 正确写法（走前端路由） -->
  <Link to={`prod/${item.url}`}>{item.name}</Link>
  

  注意to属性的路径格式要和路由定义保持一致，避免多余的首尾斜杠导致路由匹配失败。

• 原生标签/编程式跳转场景使用navigate方法拦截
  如果必须使用原生<a>标签，或者需要在异步逻辑完成后跳转，可以阻止默认跳转行为，调用官方提供的navigate方法处理：

  <script>
    import { navigate } from 'svelte-router-spa'
  
    function jumpToProd(e, url) {
      e.preventDefault()
      navigate(`/prod/${url.trim().replace(/^\/|\/$/g, '')}`)
    }
  </script>
  
  <a href={`/prod/${item.url}`} on:click={(e) => jumpToProd(e, item.url)}>{item.name}</a>
  

• 确认生产服务配置正确性
  你当前package.json中的sirv public -s命令已经开启了SPA单页路由回退，会将所有不存在的路径请求重定向到入口index.html，如果仍有问题可以调整为显式配置：

  "start": "sirv public --single --host 0.0.0.0"
  

• 添加兜底路由避免白屏
  可以在routes.js的规则末尾添加通配符兜底路由，所有匹配失败的路径统一跳转到404页面：

  // routes.js 新增规则
  {
    path: '*',
    component: NotFound // 替换为你自己的404组件
  }
  

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