Defining Routes

Now that we installed the plugin and defined our first route, let's take a look at how we can define different types of routes in our application. If you are familiar with Remix-flat-routes conventions, you can skip this page and go to the next one.

Since vite-plugin-remix-routes is built on top of react-router, you need to be familiar with the basic concepts of react-router to fully understand how to use this plugin. You can find more information about react-router in their official documentation

Basic Routes

As we've seen in the Define you first route, to define a basic route, we simply create a file in the routes directory. The file name will be used as the route path. Each route file should export a React component that will be rendered when the route is matched.

Let's create a new route called about:

$ touch app/routes/about.tsx

Now let's define the route component:

// app/routes/about.tsx

export default function About() {
  return <h1>About</h1>
}

Now if we visit /about in our browser, we should see the About component.

Nested Routes

To define nested routes, we can create a directory in the routes directory with the name of the route. Let's create a new route for /users/profile:

// app/routes/users+/profile.tsx

export default function Profile() {
  return <h1>Profile</h1>
}

Now if we navigate to /users/profile in our browser, and we will see the Profile page.

Dynamic Routes

For creating a dynamic route, we need to create a file in the routes directory with a name that starts with a $. Let's say we need a route that will match /users/:id, we can create a file called $id.tsx in the routes/users directory:

// app/routes/users+/$id.tsx
import { useParams } from 'react-router-dom'

export function Component() {
  const { id } = useParams()

  return <h1>User {id}</h1>
}

We can see User 1 on the page by visiting /users/1 in the browser.

Index Routes

To define an index route, we can create a file named index. Let's create an index route for the routes/users directory:

// app/routes/users+/index.tsx

export default function Users() {
  return <h1>Users</h1>
}

Now if we visit /users in the browser, we should see the Users page.

Layout Routes

Each sub-directory in the routes directory can have a custom layout. To define a layout for a directory, we should create a _layout file in the directory. For example, to define a layout for the routes/users+ directory, we create a file called _layout in the users+ directory:

// app/routes/users+/_layout.tsx
import { Outlet } from 'react-router-dom'

export function Component() {
  return (
    <div>
      <h1>Users Layout</h1>
      <Outlet />
    </div>
  )
}

Keep in mind that the layout component should render the Outlet component or useOutlet to be able to render children routes.

Lazy Routes

In order to keep your application bundles small and support code-splitting of your routes, you can define lazy routes. default export of the route file is a lazy-loaded route

export default function LazyRoute() {
  return <h1>Lazy Route</h1>
}

If you want to define a non-lazy-loaded route, you can use named Component exports:

export function Component() {
  return <h1>Non Lazy Route</h1>
}

Splat Routes

Finally to define a splat route (aka catch-all route), we can create a file named $.tsx.

// routes/$.tsx

export function Component() {
  return <h1>Not Found</h1>
}

Now if we visit a route that doesn't exist, we should see the NotFound page.