Handling Routing in remix and upgrading to v2

Learning routing in remix is pretty easy not that much learning curve in v2. Recently remix upgraded from v1 to v2. V2 makes the file based routing from folders to only file naming conventions. we will discuss further on this post.

V1 routing in Remix

In v1 we use folder based routing for example in routes folder we have dashboard folder inside it profile.jsx file and further on we use this type of conventions for routing.

app/
├── routes/
│   ├── __auth/
│   │   ├── login.tsx
│   │   ├── logout.tsx
│   │   └── signup.tsx
│   ├── __public/
│   │   ├── about-us.tsx
│   │   ├── contact.tsx
│   │   └── index.tsx
│   ├── dashboard/
│   │   ├── calendar/
│   │   │   ├── $day.tsx
│   │   │   └── index.tsx
│   │   ├── projects/
│   │   │   ├── $projectId/
│   │   │   │   ├── collaborators.tsx
│   │   │   │   ├── edit.tsx
│   │   │   │   ├── index.tsx
│   │   │   │   ├── settings.tsx
│   │   │   │   └── tasks.$taskId.tsx
│   │   │   ├── $projectId.tsx
│   │   │   └── new.tsx
│   │   ├── calendar.tsx
│   │   ├── index.tsx
│   │   └── projects.tsx
│   ├── __auth.tsx
│   ├── __public.tsx
│   └── dashboard.projects.$projectId.print.tsx
└── root.tsx

Upgrading to v2 routing

In v2 we have to difine the file name only in order to creating dynamic routing we futher discuss about that in this post.

app/
├── routes/
│   ├── _auth.login.tsx
│   ├── _auth.logout.tsx
│   ├── _auth.signup.tsx
│   ├── _auth.tsx
│   ├── _public._index.tsx
│   ├── _public.about-us.tsx
│   ├── _public.contact.tsx
│   ├── _public.tsx
│   ├── dashboard._index.tsx
│   ├── dashboard.calendar._index.tsx
│   ├── dashboard.calendar.$day.tsx
│   ├── dashboard.calendar.tsx
│   ├── dashboard.projects.$projectId._index.tsx
│   ├── dashboard.projects.$projectId.collaborators.tsx
│   ├── dashboard.projects.$projectId.edit.tsx
│   ├── dashboard.projects.$projectId.settings.tsx
│   ├── dashboard.projects.$projectId.tasks.$taskId.tsx
│   ├── dashboard.projects.$projectId.tsx
│   ├── dashboard.projects.new.tsx
│   ├── dashboard.projects.tsx
│   └── dashboard_.projects.$projectId.print.tsx
└── root.tsx

 

Creating dynamic routing

In order to create dynamic routing in remix we have create the file for example AllPost.tsx and i want to show single post navigating through dynamic routing you have to create a post.$postid.tsx file to navigating to from /AllPost to /Post/postid.

 app/
├── routes/
│   ├── _index.tsx
│   ├── AllPost.tsx
│   ├── post.$postid.tsx
└── root.tsx

 

Nested Routes

After creating dynamic routes it working fine, But There is 404 route that creates mess and give error unnecessary so how to prevent it.

Simple let suppose we have post.$postid.tsx route, Create post._index.jsx file so the route /post not give the 404 error messages.

 app/
├── routes/
│   ├── _index.tsx
│   ├── AllPost.tsx
│   ├── post.$postid.tsx
│   ├── post._index.tsx
└── root.tsx

 

Navigation in Remix

Navigate through routes using React router.

import { useNavigate } from "@remix-run/react";

function SomeComponent() {
  const navigate = useNavigate();
  return (
    <button
      onClick={() => {
        navigate(-1);
      }}
    />
  );
}