Typescript has become a go-to solution for web development. It helps us write more reliable and efficient code. However, there were some places where we did not have the option to use Typescript. For example, let's say you want to create a React app. One of the first things you care about is routing. For routing, we almost had only one option: React Router DOM. However, React Router DOM is not type-safe. It is a great choice for React apps, but it is not the best choice for Typescript apps. You can use React Router DOM for a lot of your React apps, but if you're someone who loves type-safety like me, you might want to try Tanstack Router.

Tanstack Router is a type-safe routing solution for React. It provides a lot of benefits, such as:

• 100% inferred TypeScript support
• Typesafe navigation
• Nested Routing and layout routes
• Built-in Route Loaders w/ SWR Caching
• Designed for client-side data caches (TanStack Query, SWR, etc.)
• Automatic route prefetching
• Asynchronous route elements and error boundaries
• File-based Route Generation
• Typesafe JSON-first Search Params state management APIs
• Path and Search Parameter Schema Validation
• Search Param Navigation APIs
• Custom Search Param parser/serializer support
• Search param middleware
• Route matching/loading middleware

As you can see in the image above, we have a Link component and we are passing down a to prop to it. When we used React Router DOM, we had to type the to prop as a string. But with Tanstack Router, you can get autocomplete for all the possible routes in your app. This is a huge time saver and makes your code more readable. If you didn't fully understand what I just said, take a look at the image below:

Let's see how you can start using Tanstack Router in your app. First, you need to install the package:

pnpm install @tanstack/react-router@beta

I use pnpm as my package manager, so I have to use pnpm to install the package. You can use npm, yarn or bun to install the package.

import { RootRoute, Route, Router } from "@tanstack/router"
import { RootLayout } from "./layouts"
import Home from "./pages/Home"
import Users from "./pages/Users"
import Posts from "./pages/Posts"

const indexRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "/",
  component: Home,
})
const userRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "/users",
  component: Users,
})
const postsRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "/posts",
  component: Posts,
})

// create a route tree
const routeTree = rootRoute.addChildren([indexRoute, userRoute, postsRoute])

// create router
const router = new Router({ routeTree })

// register your router for type-safety magic
declare module "@tanstack/router" {
  interface Register {
  router: typeof router
  }
}

export default router

Here is what we need to do to get started with Tanstack Router:

• Creating a root route (ilovamizdagi barcha routelarni o’rab turuvchi route)
• Child routes. Ilovangizdagi sahifalarni birma-bir e’lon qilib ketaverasiz -
• Creating route trees
• Typescript magic:

declare module "@tanstack/router" {
interface Register {
  router: typeof router;
  }
}
{/* this is the code that we need to add to our app so that we can get Tanstack Router working properly with TypeScript */}

• Wrap our App component with the RouterProvider:

import { RouterProvider } from "@tanstack/router"
import router from "./router"

export default function App() {
  return (
    <RouterProvider router={router} />
  )
}

• Now, let's create a Navbar component and add a Link component to it. The Link component is a built-in component in Tanstack Router. It is used to create links in your app. You can use the Link component to navigate to different routes in your app.

import { Link } from "@tanstack/router";
export function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/posts">Posts</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
      </ul>
    </nav>
  )
}

As you can see, with a small number of steps, we were able to get Tanstack Router up and running in our app. But, what we've talked about is just the basics. Tanstack Router has many more features and capabilities that we haven't discussed yet. In the future articles, we'll explore some of these features in more detail.

Goodbye, React Router DOM?

I admit that React Router DOM is still a go-to solution in a lot of React apps, but I am sure that Tanstack Router will become the new standard in the future. If React Router DOM doesn't evolve well enough to compete with Tanstack Router, then Tanstack Router will easily take over.