Rails 将 /#/ 添加到根 url答案

【问题标题】：Rails adding /#/ to root urlRails 将 /#/ 添加到根 url
【发布时间】：2020-08-02 04:52:34
【问题描述】：

可能是一个简单的问题，但我在使用带有 webpacker 的 Rails 6 时遇到了这个问题，我的根 url 出现为 /#/ 而不是 /。如果我尝试访问 localhost:3000，它会自动重定向到 localhost:3000/#/，而我的所有其他路由都会通过它。在这个项目中，我找不到任何与典型 Rails 应用程序不同的地方，这会导致路由像这样工作。

我想把它放到一个干净的 localhost:3000/ 上，这样它看起来会更好，我相信 /#/ 会弄乱带有片段 href 的标签，使它们重定向到索引页面。

编辑：添加来自rails routes的输出

                          api_session GET    /api/session(.:format)                                                                   api/sessions#show {:format=>:json}
                                      DELETE /api/session(.:format)                                                                   api/sessions#destroy {:format=>:json}
                                      POST   /api/session(.:format)                                                                   api/sessions#create {:format=>:json}
                            api_users GET    /api/users(.:format)                                                                     api/users#index {:format=>:json}
                                      POST   /api/users(.:format)                                                                     api/users#create {:format=>:json}
                             api_user GET    /api/users/:id(.:format)                                                                 api/users#show {:format=>:json}
                                      PATCH  /api/users/:id(.:format)                                                                 api/users#update {:format=>:json}
                                      PUT    /api/users/:id(.:format)                                                                 api/users#update {:format=>:json}
                        api_campaigns GET    /api/campaigns(.:format)                                                                 api/campaigns#index {:format=>:json}
                                      POST   /api/campaigns(.:format)                                                                 api/campaigns#create {:format=>:json}
                         api_campaign GET    /api/campaigns/:id(.:format)                                                             api/campaigns#show {:format=>:json}
                                      PATCH  /api/campaigns/:id(.:format)                                                             api/campaigns#update {:format=>:json}
                                      PUT    /api/campaigns/:id(.:format)                                                             api/campaigns#update {:format=>:json}
                                      DELETE /api/campaigns/:id(.:format)                                                             api/campaigns#destroy {:format=>:json}
                    api_campaign_subs GET    /api/campaign_subs(.:format)                                                             api/campaign_subs#index {:format=>:json}
                                      POST   /api/campaign_subs(.:format)                                                             api/campaign_subs#create {:format=>:json}
                     api_campaign_sub DELETE /api/campaign_subs/:id(.:format)                                                         api/campaign_subs#destroy {:format=>:json}
                       api_characters GET    /api/characters(.:format)                                                                api/characters#index {:format=>:json}
                                      POST   /api/characters(.:format)                                                                api/characters#create {:format=>:json}
                        api_character GET    /api/characters/:id(.:format)                                                            api/characters#show {:format=>:json}
                                      PATCH  /api/characters/:id(.:format)                                                            api/characters#update {:format=>:json}
                                      PUT    /api/characters/:id(.:format)                                                            api/characters#update {:format=>:json}
                                      DELETE /api/characters/:id(.:format)                                                            api/characters#destroy {:format=>:json}
                          api_invites POST   /api/invites(.:format)                                                                   api/invites#create {:format=>:json}
                           api_invite PATCH  /api/invites/:id(.:format)                                                               api/invites#update {:format=>:json}
                                      PUT    /api/invites/:id(.:format)                                                               api/invites#update {:format=>:json}
                                      DELETE /api/invites/:id(.:format)                                                               api/invites#destroy {:format=>:json}
                                 root GET    /                                                                                        static_pages#root

development.log 也没有什么特别说明的内容。

Started GET "/" for ::1 at 2020-04-19 16:00:18 -0400
Processing by StaticPagesController#root as HTML

然后是一些数据库调用

Rendered api/users/_user.json.jbuilder (Duration: 140.1ms | Allocations: 20249)
  Rendered static_pages/root.html.erb within layouts/application (Duration: 150.1ms | Allocations: 21250)
Completed 200 OK in 217ms (Views: 204.9ms | ActiveRecord: 11.7ms | Allocations: 28894)

【问题讨论】：

您在打开页面时在开发日志中看到了什么？只是要完全清楚，这是页面加载时，而不是在您单击某些内容之后？你能发布rake routes的输出吗？
你在使用任何使用 js 路由器的 js 框架吗？检查浏览器的网络，我认为它会告诉您哪个代码发起了请求
你能分享处理那个动作的 API 控制器吗，看起来你点击了 API 路由，但是根被渲染了，我敢打赌它正在那个过程中发生。
@RockwellRice 我正在运行一个基本的 StaticPagesController 以将 React 用于前端。 ``` 类 StaticPagesController
查看这些帖子stackoverflow.com/questions/49240231/removing-from-hashrouter stackoverflow.com/questions/27928372/… 看来我的问题实际上是我的反应路由器中的的路由与服务器不匹配。将对其进行更多研究，看看我是否能找到解决方法。

标签： ruby-on-rails url routes

【解决方案1】：

我最终确实以某种方式解决了这个问题。问题是我使用的是 HashRouter，它使用 URL 中的散列内容进行前端路由，但从未将该信息发送到服务器。

我通过切换到 BrowserRouter 并实现一个包罗万象的路由将所有内容重新路由到 /* 路径来解决它。

但是，我知道过去我使用 HashRouter 制作了单页应用程序，这些应用程序没有将 # 添加到 url，并且在后端工作得非常好。我不确定这次我做了什么不同，或者可能是因为更高版本的 Rails 或 React。

【讨论】：

【解决方案2】：

如果你使用的是 vue-router

vue-router 的默认模式是 hash(#) 模式，因为它使用 URL 哈希来模拟完整的 URL，这样当 URL 更改时页面不会重新加载。

要摆脱散列模式，您可以使用路由器的历史模式，该模式利用history.pushState API 实现 URL 导航，无需重新加载页面。并添加 -> mode: 'history'。

示例：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

【讨论】：