If you're feeling impatient and prefer to skip all of our wonderful documentation, here is the bare minimum to get going with TanStack Router. We'll use React for this example, but the same principles apply to other frameworks.
import React, { StrictMode } from 'react'import ReactDOM from 'react-dom/client'import { Outlet, RouterProvider, Link, Router, Route, RootRoute,} from '@tanstack/react-router'
// Create a root routeconst rootRoute = new RootRoute({ component: RootComponent,})
function RootComponent() { return ( <> <div> <Link to="/">Home</Link> <Link to="/about">About</Link> </div> <hr /> <Outlet /> </> )}
// Create an index routeconst indexRoute = new Route({ getParentRoute: () => rootRoute, path: '/', component: IndexComponent,})
function IndexComponent() { return ( <div> <h3>Welcome Home!</h3> </div> )}
const aboutRoute = new Route({ getParentRoute: () => rootRoute, path: '/about', component: AboutComponent,})
function AboutComponent() { return <div>Hello from About!</div>}
// Create the route tree using your routesconst routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
// Create the router using your route treeconst router = new Router({ routeTree })
// Register your router for maximum type safetydeclare module '@tanstack/react-router' { interface Register { router: typeof router }}
// Render our app!const rootElement = document.getElementById('app')!if (!rootElement.innerHTML) { const root = ReactDOM.createRoot(rootElement) root.render(<RouterProvider router={router} />)}
If you skipped this example or didn't understand something, we don't blame you, because there's so much more to learn to really take advantage of TanStack Router! Let's move on.
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.