Router Docs
Router Examples
- Quickstart (file-based)
- Quickstart (code-based)
- Basic (file-based)
- Basic (code-based)
- Basic + React Query (file-based)
- Basic + React Query (code-based)
- Basic + SSR (file-based)
- Basic + SSR Streaming (file-based)
- Kitchen Sink (file-based)
- Kitchen Sink (code-based)
- Kitchen Sink + React Query (file-based)
- Kitchen Sink + React Query (code-based)
- Location Masking
- Authenticated Routes
- Scroll Restoration
- Deferred Data
- Navigation Blocking
- View Transitions
- Framer Motion
- With tRPC
- With tRPC + React Query
- Monorepo basic
- Monorepo basic (with lazy loading)
- Monorepo with React Query
React Example: Quickstart File Based
import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
import './styles.css'
// Set up a Router instance
const router = createRouter({
routeTree,
defaultPreload: 'intent',
scrollRestoration: true,
})
// Register things for typesafety
declare module '@tanstack/react-router' {
interface Register {
router: typeof router
}
}
const rootElement = document.getElementById('app')!
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement)
root.render(<RouterProvider router={router} />)
}