如何在 URL 中没有 # （哈希）的情况下在 Elm 中进行路由/导航？

Posted 2023-02-21

【中文标题】如何在 URL 中没有 # （哈希）的情况下在 Elm 中进行路由/导航？

【英文标题】：How to do routing/navigation in Elm without the # (hash) in the URL?

【发布时间】：2017-04-11 11:12:08

【问题描述】：

使用UrlParser.parseHash 函数我能够成功解析以下网址：

http://localhost:8000/MyRepl.elm/#home/something-else

行为与预期一致，当我将其复制粘贴到浏览器中并按 Enter 时 - 应用会加载相应的视图。

但现在我想删除#，为此我使用了UrlParser.parsePath 函数。我保留了与以前完全相同的其余代码 - 但由于某种原因，这不起作用。

当我复制粘贴这个并回车时：

http://localhost:8000/MyRepl.elm/home/something-else - 注意没有#。

浏览器创建对 elm -reactor localhost 服务器的直接请求。

没有路由发生。 elm reactor 服务器返回 404 - 好像没有名为 /MyRepl.elm/home/something-else 的文件

但是没有# 的路由应该是可能的，因为http://package.elm-lang.org/packages - Docs 站点是用elm 编写的，并且如您所见，url 中没有#。

问题：

有人遇到过同样的问题吗？任何想法如何解决这个问题？

或者你能告诉我一个没有#的导航按预期工作的回购吗？

【问题讨论】：

我建议你检查一下 elm-reactor 是否支持深度链接。如果 http 服务器不支持它，那么 SPA 就无法完成它的工作。

检查我的例子github.com/rofrol/elm-navigation-example

【参考方案1】：

您需要一个为每个请求提供索引页面的后端。在为索引页面提供服务后，路由将在 Elm 中照常进行。

例如在 express 中它看起来像：

router.get('/', function(req, res) 
    res.sendFile(path.join(__dirname, 'public/index.html'));
);

router.get('/*', function(req, res) 
  res.sendFile(path.join(__dirname, 'public/index.html'));
);

榆树反应堆不支持这个。

如果你使用 webpack，你可以对 historyApiFallback 属性 How to tell webpack dev server to serve index.html for any route 做同样的事情