前端路由器如何在 MVC 框架中工作？

Question

我无法完全理解单页应用程序如何自行进行路由。

也许你可以看看例子here。

如果您单击那些 link（在已访问的紫色 link 下方），url 和页面将被更改而无需重新加载。但是如果前端部署在MVC框架中怎么实现呢？

是不是如果你在MVC上访问一个url，它会为那个url寻找对应的控制器？如果发生这种情况，当然会重新加载页面，不是吗？如果使用 HTML5 历史记录，当我重新访问 url 时，页面如何显示更改后的状态？

有人可以解释如何使用部署在像 Rails 这样的 MVC 框架上的 React 应用程序来实现这一点吗？谢谢

Answer 1

我比较熟悉Angular，但是所有Single Page Applications（SPA）都是基于同一个模型。你有三层：

Rails MVC 路由系统及其路由和控制器
React SPA 路由系统（也有自己的路线和控制器系统）
React 事件处理系统，作为 javascript 框架，除其他外，捕获 Web 应用程序中的鼠标点击

在您的 reactrails 示例页面中，您网站的根目录 (/) 由 Rails 处理，其他所有页面 (/*) 都被拦截并由 react 路由系统处理。

所以基本上，如果你有一个 rails ApplicationController 你可以有一个 config/routes.rb 这样的：

# routes.rb
root 'application#main'
# catch every routes and serve only the Application.main action
match '*path', to: 'application#main'

# application_controller.rb
class ApplicationController
    def main
    end
end

这会将到达 Rails（/this/is/an/example、/that/one/is/not/an/example...）的每个 url 重定向到 React 路由器。（请注意，您还可以使用其他路由，例如 /api/gimme/my/damn/json/data，这些路由将解析到其他控制器并发回 JSON、xml、html 或任何类型的数据）

然后，在您的 html 页面中，React 拦截链接或按钮上的每次点击，并将它们与自己的路由进行比较。
如果路由匹配，它将通过其模板系统显示正确的页面（通常通过 Ajax 加载它或从其缓存中读取），并且您不会看到任何页面重新加载。你可以说 react act 有一个客户端服务器。

如果你调用一个url，比如/i/like/flowers，路由将首先被rails处理（/*），这将向你发送一个html 文件位于 / 路线，包含你的 SPA 应用程序，它将启动，分析路线本身，并从它自己的模板系统向你展示正确的内容。

总而言之，您有：

GET /my/super/react/url
//=> Rails serves `main.html` that includes `react-router`

加载 main.html 后，react-router 查看其路由组件并在路由存在时提供正确的模板 (/my/super/react/url)。

您可以在 react-router documentation

中找到更多示例

这是基本场景，我相信其他人会完成我未涵盖的所有内容，并添加 react 个特定示例！

前端路由器如何在 MVC 框架中工作？

How front-end router works in a MVC Framework?

javascript

ruby-on-rails-4

reactjs

react-router