Routing

Defining routes

When using Inertia, all of your application's routes are defined server-side. This means that you don't need Vue Router or React Router. Instead, you can simply define Rails routes and return Inertia responses from those routes.

Shorthand routes

If you have a page that doesn't need a corresponding controller method, like an "FAQ" or "about" page, you can route directly to a component via the inertia method.

# In config/routes.rb
Rails.application.routes.draw do
  # Basic usage - maps 'dashboard' URL to 'Dashboard' component
  inertia 'dashboard' => 'Dashboard'

  # Using a symbol - infers component name from route
  inertia :settings

  # Within namespaces and scopes
  namespace :admin do
    inertia 'dashboard' => 'Admin/Dashboard'
  end

  # Within resource definitions
  resources :users do
    inertia :activity, on: :member
    inertia :statistics, on: :collection
  end
end

Generating URLs

Some server-side frameworks allow you to generate URLs from named routes. However, you will not have access to those helpers client-side. Here are a couple ways to still use named routes with Inertia.

The first option is to generate URLs server-side and include them as props. Notice in this example how we're passing the edit_url and create_url to the Users/Index component.

class UsersController < ApplicationController
  def index
    render inertia: 'Users/Index', props: {
      users: User.all.map do |user|
        user.as_json(
          only: [ :id, :name, :email ]
        ).merge(
          edit_url: edit_user_path(user)
        )
      end,
      create_url: new_user_path
    }
  end
end

Another option is to use JsRoutes or JS From Routes gems that make named server-side routes available on the client via autogenerated helpers.