The Remix default starter app created a route in app/routes/_index.jsx.

This is the default route, the one that listens on /, and it generates the output you see on http://localhost:3000/:

export const meta = () => {
  return [{ title: 'New Remix App' }]
}

export default function Index() {
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Welcome to Remix</h1>
      <ul>
        <li>
          <a
            target='_blank'
            href='https://remix.run/tutorials/blog'
            rel='noreferrer'>
            15m Quickstart Blog Tutorial
          </a>
        </li>
        <li>
          <a
            target='_blank'
            href='https://remix.run/tutorials/jokes'
            rel='noreferrer'>
            Deep Dive Jokes App Tutorial
          </a>
        </li>
        <li>
          <a target='_blank' href='https://remix.run/docs' rel='noreferrer'>
            Remix Docs
          </a>
        </li>
      </ul>
    </div>
  )
}

See, we have a default export that outputs the route component’s JSX.

Then we export a function named meta to customize the title meta tag (remember we can have named export to provide specific features among others we have the functions meta and links).

Remix has file-based routing, which follows this structure:

• app/routes/_index.jsx -> /
• app/routes/about.jsx -> /about
• app/routes/contact.jsx -> /contact

Let’s create the file about.jsx in app/routes/ to add a new route:

export const meta = () => {
  return [{ title: 'About page' }]
}

export default function About() {
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>About this site</h1>
      <p>It&apos;s a very cool site!</p>
    </div>
  )
}

Go to http://localhost:3000/about and you’ll see the result:

It’s important to note that Remix is built on top of React Router, so if you’re familiar with it, you’ll find Remix familiar.

We’ll later see how to link from the homepage to this page, and how to add nested routes and dynamic routes.

Lessons in this unit: