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

我無法完全理解單個頁面應用程序可以如何自行完成路由。前端路由器如何在MVC框架中工作？

也許你可以看到示例here。

如果你點擊這些鏈接（以下走訪，紫色鏈接），URL和頁面將改變而無需重新加載。但是如果前端部署在MVC框架中，如何實現？

是不是如果你訪問MVC的網址，它會尋找相應的控制器爲該網址？如果發生這種情況，頁面當然會重新加載不是嗎？如果它使用HTML5歷史記錄，當我重新訪問url時，該頁面如何顯示更改的狀態？

有人可以解釋如何使用React應用程序部署在像Rails這樣的MVC框架上嗎？謝謝

來源

2016-03-05 Alfat Saputra Harun

我更熟悉Angular，但所有的Single Page Applications（SPA）都基於相同的模型。你有三個層次：

的Rails MVC路由系統，其路線和控制器
的React SPA路由系統（也有自己的路線和控制系統）
的React事件處理系統，，作爲一個JavaScript框架，除其他外，在Web應用程序中捕獲鼠標點擊

在您的reactrails示例頁面中，您的網站的根目錄（/）由Rails處理，並且每隔一頁（/*）由react路由系統攔截並處理。

所以基本上，如果你有一個導軌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 ......）重定向到React路由器。（請注意，你也可以有其他途徑，如/api/gimme/my/damn/json/data，將解決其它控制器和發回JSON，xml，html或任何類型的數據）

然後，在你的HTML頁面，React攔截每點擊，鏈接上或按鈕，並將它們與自己的路線進行比較。
如果路徑匹配，它將通過其模板系統顯示正確的頁面（通常通過Ajax加載它或從緩存中讀取它），並且不會看到任何頁面重新加載。你可以說react行爲有一個客戶端服務器。

如果你把這種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特定的樣本！

來源

2016-03-05 10:40:16 cl3m

謝謝你的回答。很好地解釋;） –

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

回答

相關問題