CODEWITHSUNDEEP
javascriptruby-on-rails-4reactjsreact-router
Alfat Saputra Harun
Alfat Saputra Harun

Reputation: 1131

How front-end router works in a MVC Framework?

I cannot fully understand how a single page application can do routing by itself.

Maybe you can see the example here.

example

If you click on those links (below the visited, purple color link), the url and the page will be change without reloading. But how to achieve this if the front-end is deployed in a MVC framework?

Isn't that if you visit a url on MVC, it'll will look for the corresponding controller for that url? If that happen, of course the page will be reloaded isn't it? If it using HTML5 History, how can when I revisit the url, the page display the changed state?

Can someone explain how to achieve this with React app that deployed on a MVC framework like Rails? Thank you

Upvotes: 3

Views: 1563

Answers (1)

cl3m
cl3m

Reputation: 2801

I'm more familiar with Angular, but all the Single Page Applications (SPA) are based on the the same model. You have three layers:

  • the Rails MVC routing system with its routes and controllers
  • the React SPA routing system (that also has its own routes and controller system)
  • the React event handling system that, as a javascript framework, among other things, catches mouse clicks in the web application

In your reactrails example page, the root of your web site (/) is handled by Rails, and every other pages (/*) are intercepted and handled by the react routing system.

So basically, if you have a rails ApplicationController you could have a config/routes.rb like this:

# 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

This will redirect every urls coming to Rails (/this/is/an/example, /that/one/is/not/an/example...) to the React router. (Note that you could also have other routes such as /api/gimme/my/damn/json/data that will resolve to other controllers and send back JSON, xml, html or any kind of data)

Then, in your html page, React intercepts every clicks, on links or buttons, and compare them to its own routes.
If a route match, it will display the correct page via its templating system, (usually loading it by Ajax or read it from its cache), and you won't see any page reload. You could say that react act has a client-side server.

If you call a url such as /i/like/flowers, the route will be first processed by rails (/*), that will send you an html file located at the / route, containing your SPA app, that will kicks in, analyse the route itself, and show you the correct content from its own templating system.

So to sum up, you have:

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

Once main.html is loaded, react-router looks at its routes components and serve the right template if route exists (/my/super/react/url).

You could find more examples in the react-router documentation

This is the basic scenario, and I'm sure others will complete anything I didn't cover, and add react specific samples!

Upvotes: 4

Related Questions