Resource Routes

Most routes in Remix are UI Routes, or routes that actually render a component. But routes don’t always have to render components. There are a handful of cases where you want to use route as a general purpose endpoint to your website. Here are a few examples:

• JSON API for a mobile app that reuses server-side code with the Remix UI
• Dynamically generating PDFs
• Webhooks for other services like Stripe or GitHub
• a CSS file that dynamically renders custom properties for a user’s preferred theme

If a route doesn’t export a default component, it can be used as a Resource Route. If called with , the loader’s response is returned and none of the parent route loaders are called either (because those are needed for the UI, but this is not the UI). If called with POST, the action’s response is called.

It’s linking to a PDF version of the page. To make this work we can create a Resource Route below it. Notice that it has no component: that makes it a Resource Route.

When the user clicks the link from the UI route, they will navigate to the PDF.

There’s a subtle detail to be aware of when linking to resource routes. You need to link to it with <Link reloadDocument> or a plain . If you link to it with a normal <Link to="pdf"> without reloadDocument, then the resource route will be treated as a UI route. Remix will try to get the data with fetch and render the component. Don’t sweat it too much, you’ll get a helpful error message if you make this mistake.

You’ll probably want to add a file extension to your resource routes. This is tricky because one of Remix’s route file naming conventions is that becomes / so you can nest the URL without nesting the UI.