transitioncomponent enables switching between pages without a full website reload. It works similar to links, but instead of reloading the complete website, including the layout like Rails usually does, it only asynchronously reloads the page without the layout and replaces it dynamically.
class, the transition component can handle additional parameters:
pathexpects a path within our application. If you want to route to a link outside our application, use the
amethod, rendering a typical HTML
transitioncomponent automatically gets the
activeclass on the clientside when the current path equals the target path.
transitioncomponent is currently active, the parent
transitioncomponent gets the
active-childclass. A sub page is recognized if the current path is included in the target path of the parent
/some_page/child_page--> Parent gets
transitioncomponent automatically emits events on:
loadingclass and your loading state element to implement CSS based loading state effects. It may look like this (scss):
<a>tag and performs a page transition
config/routes.rb) and the corresponding endpoints in our example controller:
localhost:3000/my_example_app/page1and see our two buttons (
Page 2) and the content of page 1 (
My Example App Layoutand
This is Page 1).
Page 2-button, we get transferred to our second page (
This is Page 2) without re-loading the whole page.
Back to Page 1), we get transferred back to the first page, again without re-loading the whole page. This behavior can save quite some request payload (and therefore loading time) as only the relevant content on a page gets replaced!