React Example: Quickstart

Github StackBlitz

import React, { StrictMode } from 'react' import ReactDOM from 'react-dom/client' import { Link, Outlet, RouterProvider, createRootRoute, createRoute, createRouter, } from '@tanstack/react-router' import { TanStackRouterDevtools } from '@tanstack/react-router-devtools' import './styles.css' const rootRoute = createRootRoute({ component: () => ( <> <div className="p-2 flex gap-2"> <Link to="/" className="[&.active]:font-bold"> Home </Link>{' '} <Link to="/about" className="[&.active]:font-bold"> About </Link> </div> <hr /> <Outlet /> <TanStackRouterDevtools /> </> ), }) const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: function Index() { return ( <div className="p-2"> <h3>Welcome Home!</h3> </div> ) }, }) const aboutRoute = createRoute({ getParentRoute: () => rootRoute, path: '/about', component: function About() { return <div className="p-2">Hello from About!</div> }, }) const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]) const router = createRouter({ routeTree, defaultPreload: 'intent', scrollRestoration: true, }) 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( <StrictMode> <RouterProvider router={router} /> </StrictMode>, ) } 

import React, { StrictMode } from 'react' import ReactDOM from 'react-dom/client' import { Link, Outlet, RouterProvider, createRootRoute, createRoute, createRouter, } from '@tanstack/react-router' import { TanStackRouterDevtools } from '@tanstack/react-router-devtools' import './styles.css' const rootRoute = createRootRoute({ component: () => ( <> <div className="p-2 flex gap-2"> <Link to="/" className="[&.active]:font-bold"> Home </Link>{' '} <Link to="/about" className="[&.active]:font-bold"> About </Link> </div> <hr /> <Outlet /> <TanStackRouterDevtools /> </> ), }) const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: function Index() { return ( <div className="p-2"> <h3>Welcome Home!</h3> </div> ) }, }) const aboutRoute = createRoute({ getParentRoute: () => rootRoute, path: '/about', component: function About() { return <div className="p-2">Hello from About!</div> }, }) const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]) const router = createRouter({ routeTree, defaultPreload: 'intent', scrollRestoration: true, }) 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( <StrictMode> <RouterProvider router={router} /> </StrictMode>, ) }