如何使用Github Pages与Yew构建带路由的多页面网站？

问题根源 #

Github Pages作为静态文件托管服务，直接访问/about这类子路径时，会尝试在仓库中查找对应的文件或目录，找不到就返回404。但你的Yew应用是单页应用（SPA），所有路由逻辑都由前端的index.html处理，因此需要让所有路由请求都指向index.html。

核心解决方案：添加404.html实现重定向 #

Github Pages在找不到对应页面时会加载404.html，我们可以利用这个特性实现路由重定向：

1. 在Yew项目打包后的静态文件目录（比如dist或docs）中创建404.html，写入以下内容：

   <!DOCTYPE html>
   <html>
     <head>
       <meta charset="utf-8">
       <title>Redirecting...</title>
       <script>
         // 保留当前请求的路径、查询参数和哈希
         const fullPath = window.location.pathname + window.location.search + window.location.hash;
         // 重定向到应用入口index.html，携带原请求路径
         window.location.replace('/index.html' + fullPath);
       </script>
     </head>
     <body>
       Redirecting to the app...
     </body>
   </html>
   

2. 你的AppRoute枚举路由逻辑无需修改，Yew Router会自动解析重定向后的window.location.pathname，匹配对应的Home/About/NotFound路由。

额外配置注意事项 #

• 确保Github Pages的部署源设置为你存放静态文件的目录：比如打包到docs文件夹，就在仓库设置中选择docs作为部署源；如果用dist目录，需要在仓库根目录添加.nojekyll文件（禁用Github Pages默认的Jekyll处理，避免静态文件被忽略）。
• 若使用trunk打包Yew应用，执行trunk build --release后，将dist目录下的所有文件同步到部署目录即可。

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