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'

  # Multiple pages at once
  inertia 'about' => 'About', 'contact' => 'Contact'

  # 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

You can also pass static props to the component:

Available since:inertia_rails:3.22.0

inertia 'about' => 'About', props: { title: 'About us' }

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: 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.

Typelizer

Typelizer generates typed route helpers from your Rails routes. Each helper returns an object with url and method keys. You can pass this object directly to the Link component or router methods, and Inertia understands how to handle it.

To generate the helpers, enable route generation in your Typelizer initializer and run bin/rails typelizer:routes.

# config/initializers/typelizer.rb
Typelizer.configure do |config|
  config.routes.enabled = true
end

Typelizer generates one module per controller, with a helper for each action.

import { users } from '@/routes'

users.index() // => { url: '/users', method: 'get' }
users.show(1) // => { url: '/users/1', method: 'get' }
users.update(1) // => { url: '/users/1', method: 'patch' }

See the Typelizer route helpers guide for named route shortcuts, query strings, and other options.