Routing and Mounting Components
Within a Rails Application there are three ways to render or mount a component on a page:
- Route directly to the component from the rails
routes.rbfile. - Render a component directly from a controller.
- Render a component from within a layout or view file.
Components can be directly mounted from the Rails
routes.rb file, using the builtin Hyperstack controller.For example a Rails
routes.rb file containing get 'some_page/(*others)', to: 'hyperstack#some_component'
will route all urls beginning with
some_page to SomeComponent.When you generate a new component you can use the
--add-route option to add the route for you (see the previous section.)Note that typically the Rails route will be going to a Router Component. That is why we typically add the wild card to the Rails route so that all urls beginning with
some_page/ will all be handled by SomeComponent without having to reload the page.Also note that for the purposes of the example we used rather dubious names, a more logical setup would be:
get `/(*others)`, to 'hyperstack#app'
Which you could generate with
bundle exec rails g hyper:router App --add-route="/(*others)"
You could also divide your application into several single page apps, for example
...
get 'admin/(*others)', to: 'hyperstack#admin'
get '/(*others)', to: 'hyperstack#app'
...
would route all URLS beginning with admin to the
Admin component, and everything else to the main App component. Note that order of the routes is important as Rails will dispatch to the first route it matches.If the component is named spaced separate each module with a double underscore (__) and leave the module names CamelCase:get 'admin/(*others)', to: 'hyperstack#Admin__App'
To render a component from a controller use the
render_component helper: render_component 'Admin', {user_id: params[:id]}, layout: 'admin'
# would pass the user_id to the Admin component and use the admin layout
# in general:
render_component 'The::Component::Name'
{ ... component params ... },
{ other render params such as layout }
Only the component name is required, but note that if you want to have other render params, you will have to supply at least an empty hash for the component params.
To mount a component directly in a view use the mount_component view helper:
<%= mount_component 'Clock' %>
Like render_component may take params which will be passed to the mounted component.
Mounting a component in an existing view, is a very useful way to integrate Hyperstack into existing applications. You mount a component to serve a specific function such as a dynamic footer or a tweeter feed onto an existing view without having to do a major redesign.
Last modified 2yr ago