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 pageapp/routes/_auth.login.tsx
: The login pageapp/routes/_public.about.tsx
: A public about page