React TanStack Router

• TanStack Router

Directory Structure

.
├── index.html
├── package.json
├── src
│   ├── app.tsx
│   ├── main.tsx
│   ├── routes
│   │   ├── index.tsx
│   │   ├── react.tsx
│   │   └── __root.tsx
│   └── routeTree.gen.ts
├── tsconfig.json
└── vite.config.ts

pnpm

pnpm install @tanstack/react-router

pnpm

pnpm install -D @tanstack/router-vite-plugin

vite.config.ts

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tsconfigPaths from 'vite-tsconfig-paths'
import { TanStackRouterVite } from '@tanstack/router-vite-plugin'

export default defineConfig({
  plugins: [react(), tsconfigPaths(), TanStackRouterVite()],
})

main.tsx

src/main.tsx

import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './app'

const rootElement = document.getElementById('root')
const root = rootElement ? createRoot(rootElement) : console.error('Root element not found')

if (root) {
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  )
}

app.tsx

src/app.tsx

import { createRouter, RouterProvider } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'

const router = createRouter({ routeTree })

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

const App = () => {
  return <RouterProvider router={router} />
}

export default App

File-Based Routing

src/routes/__root.tsx

import React from 'react'
import { Outlet, createRootRoute } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: () => <Outlet />,
})

 http://localhost:***/

src/routes/index.tsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: RouteComponent,
})

function RouteComponent() {
  return <div>Hello "/"!</div>
}

 http://localhost:***/react

src/routes/react.tsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/react')({
  component: RouteComponent,
})

function RouteComponent() {
  return <div>Hello "/react"!</div>
}