Skip to content

Files

Failed to load latest commit information.

Latest commit

 Cannot retrieve latest commit at this time.

History

History
 
 

pathless-routes

Pathless Routes

A simple example demonstrates the usage of the pathless route to create layout wrappers.

Preview

Open this example on CodeSandbox:

Open in CodeSandbox

Example

One of the features of React Router is the ability to have pathless routes. This gives the ability to add route layouts without adding segments to the URL.

In this example, we are going to look at a common use case of building a blog with Remix built-in MDX compiler. We have a index route which serves as our Home page, and we have a articles section which lists all the articles we have, and also serves as a layout for the articles section.

Let's say we want to wrap each article with some styles. Due to the way MDX routes works in Remix, there is no way to include styles directly into the MDX file. We can instead create a pathless route and add our styles there.

Our file system based routes are structured as below

app
├── entry.client.tsx
├── entry.server.tsx
├── root.tsx
└── routes
    ├── articles
    │   ├── __layout
    │   │   └── hello.md
    │   └── __layout.tsx
    ├── articles.tsx
    └── index.tsx
URL Matched Route
/ app/routes/index.tsx
/articles app/routes/articles.tsx
/articles/hello app/routes/articles/__layout/hello.md

Here app/routes/articles/__layout.tsx will add a pathless route, and acts as a wrapper for all the routes inside app/routes/articles/__layout/.

Related Links