Create Your First Remix Route
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.
The installed app has a
_index.tsxfile as opposed to anindex.tsxfile. 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.tsxas opposed toindex.tsxin the video and notes would be helpful?