Routes and Remix's file structure

As we learned in the Outlet component lesson, Remix uses a file-based routing system. This means that the file structure of your project maps directly to the URL structure of your app.

But what else does this convention allow us to do?

Sibling routes

All files inside the routes folder are children of the root.tsx file. This means that the root.tsx file is the parent for the whole app.

• Directoryapp

  • root.tsx // parent route
  • Directoryroutes

    • _index.tsx // child route

However, files that sit at the same level as others within the routes folder are called siblings.

Any file that we add next to the _index.tsx file will become its sibling, and direct children of root.tsx:

• Directoryapp

  • Directoryroutes

    • _index.tsx
    • about-us.tsx // sibling route
    • contact.tsx // sibling route

For example, head back over to your browser, and type in the URL http://localhost:3000/news. Hit return and you should see a page not found message:

This is to be expected. We haven’t created a route file for /news yet. Let’s create a new file called news.tsx in the routes folder and add the following code to it:

app/routes/news.tsx

export default function NewsPage() {
  return (
    <main className="flex flex-col py-24">
      <div className="container">
        <h1 className="text-h1">News</h1>
      </div>
    </main>
  )
}

🤔 Stuck?

If you can’t remember how to add a new route file in Remix, revisit the Outlet component lesson for a refresher.

Save the file and head back to your browser. Refresh the page and you should see the new “News” page:

The root.tsx file is still rendering the code for the header and footer, but now the Outlet component we placed earlier is now rendering the NewsPage component as its child route.

root.tsx

news.tsx

http://localhost:3000/news

Search

Log in

News

HomeAboutContact

© Change this to your company name! | 2025

Important - Remix route conventions

There are some golden rules to follow when creating route files in Remix:

• The file name must end with a .tsx extension
• It must be placed inside the routes folder
• It must export a React component as the default export, e.g.

  app/routes/news.tsx

  export default function NewsPage() {
    // component code here
  }

• The file name must match the route URL, e.g.

  • routes/news.tsx maps to /news.

  • routes/about-us.tsx maps to the /about-us URL.

  • Spelling, case and special characters are important.

    If we named the file AboutUs.tsx, then the URL would be /AboutUs, which is not what we want in a web app.

root.tsx

about-us.tsx

http://localhost:3000/about-us

Search

Log in

About Us

HomeAboutContact

© Change this to your company name! | 2025

Nested routes

What if we want to create a page for each news category, e.g. /news/technology, /news/sport, /news/entertainment etc?

In Remix, this is achieved through a combination of nested and dynamic routes, where one route becomes the child of another.

1. Add another file to the routes folder called news.$category.tsx:

   

2. Inside your new news/$category.tsx file, add the following code:

   app/routes/news.$category.tsx

   export default function NewsCategoryPage() {
     return (
       <div className="container py-16">
         <h2 className="text-h2">Generic news category page</h2>
       </div>
     )
   }

3. Open app/routes/news.tsx.

   To see a child route rendered in the browser at /news, we also need to add an Outlet component to this file, just like we did earlier in the root.tsx file.

   Add the code below to app/routes/news.tsx:

   app/routes/news.tsx

   import { Outlet } from '@remix-run/react'
   
   export default function NewsPage() {
     return (
       <main className="flex flex-col py-24">
         <div className="container">
           <h1 className="text-h1">News</h1>
         </div>
   
         <Outlet />
       </main>
     )
   }

4. Save the file again and head back to your browser.

   Visit the URL http://localhost:3000/news/technology.

   You should now see the news.$category.tsx route rendered as a child of the “News” page:

   

   Try changing the word ‘technology’ in the URL to ‘sport’, ‘entertainment’, or any other word.

   You will see the same generic news category page rendered for each category. We will explain why later.

Adding navigation links

Let’s add a sub-navigation menu to the parent news page.

1. Open news.tsx.

   Add the code shown below:

   app/routes/news.tsx

   import { NavLink, Outlet } from '@remix-run/react'
   
   export default function NewsPage() {
     return (
       <main className="flex flex-col py-24">
         <div className="container">
           <h1 className="text-h1">News</h1>
           <div className="flex space-x-4 py-4">
             <NavLink
               to="technology"
               prefetch="intent"
               className={({ isActive }) =>
                 `${isActive ? 'text-blue-300 underline underline-offset-8' : 'text-blue-500'}`
               }
             >
               Technology
             </NavLink>
           </div>
         </div>
   
         <Outlet />
       </main>
     )
   }

The NavLink component

The NavLink component is a special Remix <Link> that knows whether it is “active” or not via a special isActive boolean that Remix supplies for us.

If the user is on the page that the NavLink links to then isActive turns true and we can apply a different style to the link text via a callback function.

In the example here, we are applying a lighter blue color to the text and an underline to the link when it is active:

<NavLink
  to="technology"
  prefetch="intent"
  className={({ isActive }) =>
    `${isActive ? 'text-blue-300 underline underline-offset-8' : 'text-blue-500'}`
  }
>
  Technology
</NavLink>

More information

You can read more about the NavLink component here in the Remix documentation.

Code challenge

Challenge

1. Create further NavLinks for the following news categories in the news.tsx file:

   • Entertainment
   • Business

   When you’ve finished, your final NewsPage component should behave something like this:

   

   Don’t worry that the child pages all have the same content. We will fix this in the next lesson.

Updating the index page

Remember the code we commented out in app/root.tsx? Let’s use it to update the app/routes/_index.tsx file.

1. Open app/root.tsx.

2. Select all the commented code, then cut it so it can be pasted elsewhere:

   

3. Open app/routes/_index.tsx.

   Replace the JSX currently inside the return statement brackets by pasting the copied code over it.

   app/routes/_index.tsx

   import { type MetaFunction } from '@remix-run/node'
   
   export const meta: MetaFunction = () => [{ title: 'Epic News' }]
   
   export default function Index() {
     return (
         <main className="grid h-full place-items-center">
           <h1 className="text-mega">
             Hello from{' '}
             <pre className="prose rounded-lg bg-primary p-6 text-primary-foreground">
               app/routes/_index.tsx
             </pre>
           </h1>
         </main>
         {/* <main className="grid h-full place-items-center">
           <h1 className="text-mega">Your Journey Begins!</h1>
           <p className="text-base text-gray-600 md:text-lg lg:text-xl">
             Welcome to Epic News, where the latest developments in tech are found.
           </p>
         </main> */}
     )
   }

4. Uncomment the code by removing {/* and */} from the beginning and end of the code block, then save it:

   app/routes/_index.tsx

   import { type MetaFunction } from '@remix-run/node'
   
   export const meta: MetaFunction = () => [{ title: 'Epic News' }]
   
   export default function Index() {
     return (
       {/* <main className="grid h-full place-items-center">
         <h1 className="text-mega">Your Journey Begins!</h1>
         <p className="text-base text-gray-600 md:text-lg lg:text-xl">
           Welcome to Epic News, where the latest developments in tech are found.
         </p>
       </main> */}
     )
   }

5. Fix all the broken imports that appear in the app/routes/_index.tsx file by adding the necessary imports at the top of the file.

6. Automatically sort the imports in both app/routes/_index.tsx and app/routes/root.tsx by using the VS Code keyboard shortcut Shift + Alt + O (on Windows) or Shift + Option + O (on Mac).

7. Visit http://localhost:3000/ in your browser.

   You should see your original code from the root.tsx lesson displayed on the page:

   

   Note

   This is because any child root file that named _index.tsx will be rendered directly with the parent URL, in this case http://localhost:3000/.

   Remember this step for the next challenge!

Challenge

Fix the empty news page

We’ve got a little problem: if we visit http://localhost:3000/news directly, the page looks pretty empty:

Using what you have learned about the _index.tsx special filename and Remix’s file naming convention for parents and children, can you work out how to display the text below when someone visits the http://localhost:3000/news URL directly?

When the user clicks on a category, the welcome message shown in the screenshot above should be replaced with the category page.

You can use the code below for the news welcome page content.

Placeholder code for news welcome page

export default function NewsPageIndex() {
  return (
    <main className="container py-24">
      <h2 className="text-4xl">
        Select a news category from the choices above...
      </h2>
    </main>
  )
}

The question is: where will you place it?

TIP: You will need to create a new file in the routes folder to solve this challenge. But what will you call it?

After you’ve had a go, check you solution with the one below.

Because the news.tsx file is the parent route, we can follow Remix’s naming conventions and create a file called news._index.tsx to render the welcome message when the user visits the /news URL:

app/routes/news._index.tsx

export default function NewsPageIndex() {
  return (
    <main className="container py-24">
      <h2 className="text-4xl">
        Select a news category from the choices above...
      </h2>
    </main>
  )
}

With this code in place, restart your server.

When the user visits http://localhost:3000/news, they will see the welcome message displayed on the page, and this will then be replaced by the different category pages when they click on a link:

Click to reveal

Summary

In this lesson, we have:

• looked at how Remix’s file structure and naming conventions map to the URL structure of application paths in the browser
• reviewed how the root.tsx file is the parent layout module for the whole app, and how sibling and child routes are created by adding files to the routes folder
• looked at how to create a nested route by naming a file with a period (.) in it
• learned how to render the child route in the parent route using the Outlet component
• seen, in the ‘Extra Credit’ solution above, how to use the _index.tsx naming convention to render a welcome message when the user visits the parent route URL.
• learned how to use the NavLink component to create navigation links between the different routes, and how to apply different styles to the links when they are active.

What’s next?

In the next tutorial, we will look at how to incorporate dynamic routes into our app, and how access the dynamic parts of the URL inside a loader function.