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

Question

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

也许你可以看看例子here .

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

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

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

Answer 1

我对 Angular 比较熟悉，但是所有的单页应用程序 (SPA) 都是基于相同的模型。你有三层:

• Rails MVC 路由系统及其路由和 Controller
• React SPA 路由系统(也有自己的路线和 Controller 系统)
• 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 的 url(/this/is/an/example, /that/one/is/not/an/example ...) 到 React 路由器。 (请注意，您还可以有其他路由，例如 /api/gimme/my/damn/json/data 将解析到其他 Controller 并发回 JSON，xml、html 或任何类型的数据)

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

如果调用/i/like/flowers这样的url，路由会先被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 特定示例!