@tanstack/react-router

What is @tanstack/react-router?

@tanstack/react-router is a powerful and flexible routing library for React applications. It provides a comprehensive set of features for managing navigation, route matching, and data fetching in a declarative manner.

What are @tanstack/react-router's main functionalities?

Basic Routing

This feature allows you to define basic routes for your application. The `Router` component takes an array of route objects, each specifying a path and the component to render.

import { Router, Route } from '@tanstack/react-router';

const routes = [
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> },
];

function App() {
  return (
    <Router routes={routes} />
  );
}

Nested Routes

Nested routes allow you to define routes within routes, enabling more complex and hierarchical navigation structures. The `children` property is used to specify nested routes.

import { Router, Route } from '@tanstack/react-router';

const routes = [
  { path: '/', element: <Home />, children: [
    { path: 'profile', element: <Profile /> },
    { path: 'settings', element: <Settings /> },
  ]},
];

function App() {
  return (
    <Router routes={routes} />
  );
}

Route Parameters

Route parameters allow you to capture dynamic values from the URL. The `useParams` hook is used to access these parameters within your component.

import { Router, Route, useParams } from '@tanstack/react-router';

const routes = [
  { path: '/user/:id', element: <User /> },
];

function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

function App() {
  return (
    <Router routes={routes} />
  );
}

Data Fetching

This feature allows you to fetch data before rendering a route. The `loader` function is used to fetch data, and the `useLoaderData` hook is used to access the fetched data within your component.

import { Router, Route, useLoaderData } from '@tanstack/react-router';

const routes = [
  { path: '/data', element: <DataComponent />, loader: fetchData },
];

async function fetchData() {
  const response = await fetch('/api/data');
  return response.json();
}

function DataComponent() {
  const data = useLoaderData();
  return <div>Data: {JSON.stringify(data)}</div>;
}

function App() {
  return (
    <Router routes={routes} />
  );
}

Other packages similar to @tanstack/react-router

react-router

react-router is one of the most popular routing libraries for React. It provides a similar set of features for managing navigation and route matching. However, @tanstack/react-router offers a more modern API and additional features like data fetching.

next

Next.js is a React framework that includes built-in routing capabilities. It offers file-based routing, server-side rendering, and static site generation. While it provides a more opinionated approach, it is less flexible than @tanstack/react-router for custom routing needs.

reach-router

reach-router is a smaller, simpler alternative to react-router. It focuses on accessibility and simplicity. While it covers basic routing needs, it lacks some of the advanced features and flexibility provided by @tanstack/react-router.

README

TanStack React Router

🤖 Type-safe router w/ built-in caching & URL state management for React!

Enjoy this library? Try the entire TanStack! React Query, React Table, React Charts, React Virtual

Visit tanstack.com/router for docs, guides, API and more!