To create those juicy hyperlinks between those beautiful elements in your web application, it’s possible you
might be far more familiar with the common front end approach of using HTML such as <a href="" class="">link</a>.
This is “fine”, but in Rails there’s actually a way to do this with a little less effort AND in a way that helps to protect your internal linkings during potential route refactorings.
Let’s dive in!
Assumptions & Goals
- You are on a system that has Ruby on Rails 6 setup and available to you
- You are starting from the
rails-static-pagesproject (available here - /blog/building-static-pages-in-rails6/) - We want to learn and demonstrate the
link_tohelper
Getting Started
I’ve written in several tutorials here in this site on setting up a Rails 6 project. We’re going to skip ahead
a little bit in this tutorial to jump right into using the link_to helper. As mentioned in my Assumptions,
be sure to have the rails-static-pages project as your starter.
Let’s recap some common front end markup from the Home view template, app/views/pages/home.html.erb:
<% provide(title, "Home") %>
<h1>Home</h1>
Let’s add a regular href over to our About page:
<% provide(title, "Home") %>
<h1>Home</h1>
<a href="/about">About</a>
This is acceptable of course, but a drawback is that we’re not making any use of the Rails router. Let’s rewrite this
using the link_to helper, and maybe it will start to demonstrate why we’d want to do this.
<% provide(title, "Home") %>
<h1>Home</h1>
<%= link_to "About", about_path %>
and let’s do the same to the About view template, app/views/pages/about.html.erb:
<% provide(title, "About") %>
<h1>About</h1>
<%= link_to "Home", home_path %>
Run the server with bin/rails s and make sure you can navigate back and forth between Home and About.
Adding some class
This helper is so far proving to be useful. But what happens when we want to apply some style? No problem at all. It
happens to be another parameter to link_to.
<%= link_to "About", about_path, class: "nav-link" %>
If your server is still running, check out what happened. You won’t need to hit refresh a few times, as nothing
obvious changed. However, if you use the Chrome browser to inspect the link, you should be able to see that it
now uses the class nav-link as we specified.
Let’s open one of our main stylesheets, app/assets/stylesheets/application.css:
.nav-link {
color: yellow;
background-color: darkblue;
padding: 10px;
border-radius: 10px;
}
Voila! Now when you refresh the page, you be seeing that each link is now visually similar to a button.
