Quick Start

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.

tsx
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 route
const rootRoute = new RootRoute({
component: RootComponent,
})
function RootComponent() {
return (
<>
<div>
<Link to="/">Home</Link> <Link to="/about">About</Link>
</div>
<hr />
<Outlet />
</>
)
}
// Create an index route
const 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 routes
const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
// Create the router using your route tree
const router = new Router({ routeTree })
// Register your router for maximum type safety
declare 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.

Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.