Here’s how you can use TanStack Router in a React project, including installation, simple routing setup, and navigation: --- ## 1. Install TanStack Router ```bash npm install @tanstack/react-router ``` Optional: For devtools, install: ```bash npm install @tanstack/react-router-devtools ``` --- ## 2. Basic Setup Example Below is a complete basic example in a single file. It creates a root layout, an index ("/") route, and an about ("/about") route, and sets up navigation: ```tsx import { StrictMode } from 'react' import ReactDOM from 'react-dom/client' import { Outlet, RouterProvider, Link, createRouter, createRoute, createRootRoute, } from '@tanstack/react-router' import { TanStackRouterDevtools } from '@tanstack/react-router-devtools' const rootRoute = createRootRoute({ component: () => ( <>

Home About

), }) const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', component: function Index() { return (

Welcome Home!

) }, }) const aboutRoute = createRoute({ getParentRoute: () => rootRoute, path: '/about', component: function About() { return

Hello from About!

}, }) const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]) const router = createRouter({ routeTree }) 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( , ) } ``` --- ## 3. Key Points - **Navigation:** Use the `` component. - **Outlet:** Renders child routes inside the layout. - **Devtools:** Optionally add `` for debugging. --- ## 4. Start Your App Add a div with `id="app"` to your `index.html` and start your app as usual. --- ## Docs & Links - [Official TanStack Router Docs](https://tanstack.com/router/latest/docs/framework/react/overview) - [Quick Start Example](https://tanstack.com/router/latest/docs/framework/react/quick-start) Let me know if you want to see advanced routing or server-side rendering examples!

Using TanStack Router with React and context7 | LangDB - View this shared AI conversation thread from LangDB's enterprise AI platform.