HOWTO: Use the link_to Helper in Rails6

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-pages project (available here - /blog/building-static-pages-in-rails6/)
  • We want to learn and demonstrate the link_to helper

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: {% highlight ruby linenos %}

<% provide(title, "Home") %>

Home

{% endhighlight %}

Let's add a regular href over to our About page: {% highlight ruby linenos %}

<% provide(title, "Home") %>

Home

About {% endhighlight %}

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.

{% highlight ruby linenos %}

<% provide(title, "Home") %>

Home

<%= link_to "About", about_path %> {% endhighlight %}

and let's do the same to the About view template, app/views/pages/about.html.erb: {% highlight ruby linenos %}

<% provide(title, "About") %>

About

<%= link_to "Home", home_path %> {% endhighlight %}

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.

{% highlight ruby linenos %}

<%= linkto "About", aboutpath, class: "nav-link" %> {% endhighlight %}

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: {% highlight ruby linenos %}

.nav-link { color: yellow; background-color: darkblue; padding: 10px; border-radius: 10px; } {% endhighlight %}

Voila! Now when you refresh the page, you be seeing that each link is now visually similar to a button.

If you found this tutorial helpful, please share it!

About the author

Hey, I'm Erik, a software engineer, gamer, writer, and content creator. I publish articles and tutorials about modern software development, design, and programming.

Get the newsletterBuy me a coffee

Wazoo