1. 3
    Create Your First Remix Route
    1m 6s
⚠️ This lesson is retired and might contain outdated information.

Create Your First Remix Route

Kent C. Dodds
InstructorKent C. Dodds
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 7 months ago

The routes in your Remix app are based on the file structure within your routes folder. You can create a new route by making a new folder under routes and creating an index.tsx inside of it.

Then in the index file you can make a new default export that returns a React component. Once that is saved, whatever you have in your component will render to the page.

Kent C. Dodds: [0:00] We want to add a link to the Blog Posts page from our home page. We'll go to app, routes, and index.tsx. Then, we'll come right around here and stick some code for a link to the /posts page for the Blog Posts.

[0:16] If we come over here, we have that link there now, and we're going to get a 404 Not Found, and that's because we don't have a route for that page.

[0:23] Let's go ahead and make a new folder here for our posts. We'll make a new file called index.tsx for that post. Then, we're going to make a default export, PostsRoute. We'll return main with an h1 Posts, we refresh, and there it is.

[0:47] We've made our first route by creating an index.tsx inside of the posts directory within our routes directory. All we do is export default, our PostsRoute, and that will be rendered within the context of the root route, which is our parent. It's going to be rendered right there in the outlet.

Patrik Affentranger
Patrik Affentranger
~ 7 months ago

The installed app has a _index.tsx file as opposed to an index.tsx file. When renaming the file and removing the underscore the app renders nothing for a reason that is only clear when reading the index-routes guide on the remix website. Maybe a quick note of why it's _index.tsx as opposed to index.tsx in the video and notes would be helpful?

Markdown supported.
Become a member to join the discussionEnroll Today