Skip to main content

Pages

In Remix, pages are defined following the file-based routing convention. This means that the file structure of your app/routes directory directly corresponds to the routes of your application.

File Naming Convention

A typical route can either be:

  • app/routes/my-route.tsx
  • app/routes/my-route/route.tsx

The first name inside the routes folder defines the URL. If it's a folder, it matches the route.tsx file inside.

Layouts

Layouts in Remix are created using nested routes. Here's an example of files using a layout:

  • app/routes/_logged.tsx
  • app/routes/_logged.users.tsx
  • app/routes/_logged.users_.$userId.tsx

Note the suffix on the users segment. This is used when we don't want a page to act as a layout.

Here's a simple example of how these files might be structured:

// app/routes/_logged.tsx
export default function LoggedLayout({ children }) {
return (
<div>
<header>Logged In User</header>
<main>{children}</main>
</div>
)
}

// app/routes/_logged.users.tsx
export default function Users() {
return <h1>User List</h1>
}

// app/routes/_logged.users_.$userId.tsx
export default function UserDetail({ params }) {
return <h1>User Details for {params.userId}</h1>
}

In this example, _logged.tsx defines a common layout for all logged-in pages. The users.tsx file represents the user list page, and users_.$userId.tsx represents individual user detail pages.

Page Prefixes

  • _logged: Protected pages that require user authentication.
  • _auth: Authentication pages (login, register, reset password).
  • _public: Public pages accessible by anybody.

For example:

  • app/routes/_logged.dashboard.tsx: A protected dashboard page
  • app/routes/_auth.login.tsx: The login page
  • app/routes/_public.about.tsx: A public about page