Hooks

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

function MyComponent() {
  const router = useRouter()
  
  return <div>Current path: {router.state.location.pathname}</div>
}

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

function MyComponent() {
  const isLoading = useRouterState({ 
    select: (state) => state.isLoading 
  })
  
  return isLoading ? <Spinner /> : <Content />
}

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

function MyComponent() {
  const navigate = useNavigate()
  
  const handleClick = () => {
    navigate({ to: '/posts/$postId', params: { postId: '123' } })
  }
  
  return <button onClick={handleClick}>Go to Post</button>
}

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

function MyComponent() {
  const location = useLocation()
  
  return <div>Current path: {location.pathname}</div>
}

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

function PostComponent() {
  const { postId } = useParams({ from: '/posts/$postId' })
  
  return <div>Post ID: {postId}</div>
}

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

function PostsComponent() {
  const search = useSearch({ from: '/posts' })
  
  return <div>Page: {search.page}</div>
}

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

function PostComponent() {
  const { post } = useLoaderData({ from: '/posts/$postId' })
  
  return <h1>{post.title}</h1>
}

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

function MyComponent() {
  const match = useMatch({ from: '/posts/$postId' })
  
  return <div>Match ID: {match.id}</div>
}

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

function Breadcrumbs() {
  const matches = useMatches()
  
  return (
    <nav>
      {matches.map(match => (
        <span key={match.id}>{match.routeId}</span>
      ))}
    </nav>
  )
}

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

function MyComponent() {
  const matchRoute = useMatchRoute()
  const isPostsPage = matchRoute({ to: '/posts' })
  
  return isPostsPage ? <PostsHeader /> : <DefaultHeader />
}

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

function FormComponent() {
  const [isDirty, setIsDirty] = useState(false)
  
  useBlocker({
    shouldBlockFn: () => isDirty,
    enableBeforeUnload: true,
    withResolver: true,
  })
  
  return <form>...</form>
}

function NavigationIndicator() {
  const { isLoading, location } = useRouterState({
    select: (state) => ({
      isLoading: state.isLoading,
      location: state.location.pathname,
    }),
  })
  
  return isLoading ? <ProgressBar /> : null
}

function LoginButton() {
  const navigate = useNavigate()
  
  const handleLogin = async () => {
    await loginUser()
    navigate({ 
      to: '/dashboard',
      replace: true,
    })
  }
  
  return <button onClick={handleLogin}>Login</button>
}

function PostPage() {
  const { postId, commentId } = useParams({ 
    from: '/posts/$postId/comments/$commentId',
    select: (params) => ({
      postId: params.postId,
      commentId: params.commentId,
    }),
  })
  
  return <Comment postId={postId} commentId={commentId} />
}

function ProductList() {
  const page = useSearch({
    from: '/products',
    select: (search) => search.page ?? 1,
  })
  
  const products = useProducts(page)
  
  return <ProductGrid products={products} />
}

function UserProfile() {
  const user = useLoaderData({
    from: '/users/$userId',
    select: (data) => data.user,
  })
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  )
}

function Navigation() {
  const matchRoute = useMatchRoute()
  
  const isSettings = matchRoute({ to: '/settings', fuzzy: true })
  const isAdmin = matchRoute({ to: '/admin' })
  
  return (
    <nav>
      <Link to="/">Home</Link>
      {isSettings && <SettingsNav />}
      {isAdmin && <AdminNav />}
    </nav>
  )
}

function Breadcrumbs() {
  const matches = useMatches({
    select: (matches) => matches.map(match => ({
      id: match.id,
      pathname: match.pathname,
      // Access custom metadata from route
      title: match.context?.breadcrumb,
    })),
  })
  
  return (
    <nav>
      {matches.map((match, i) => (
        <span key={match.id}>
          {i > 0 && ' > '}
          <Link to={match.pathname}>{match.title}</Link>
        </span>
      ))}
    </nav>
  )
}

function EditForm() {
  const [formData, setFormData] = useState(initialData)
  const [originalData] = useState(initialData)
  
  const hasChanges = !deepEqual(formData, originalData)
  
  const blocker = useBlocker({
    shouldBlockFn: ({ current, next }) => {
      return hasChanges && current.routeId !== next.routeId
    },
    withResolver: true,
  })
  
  return (
    <>
      <form>
        <input 
          value={formData.title}
          onChange={(e) => setFormData({ ...formData, title: e.target.value })}
        />
      </form>
      
      {blocker.status === 'blocked' && (
        <Dialog>
          <p>You have unsaved changes. Are you sure you want to leave?</p>
          <button onClick={blocker.proceed}>Leave</button>
          <button onClick={blocker.reset}>Stay</button>
        </Dialog>
      )}
    </>
  )
}

function Analytics() {
  const pathname = useLocation({ 
    select: (loc) => loc.pathname 
  })
  
  useEffect(() => {
    trackPageView(pathname)
  }, [pathname])
  
  return null
}

// ❌ Re-renders on any router state change
const state = useRouterState()

// ✅ Only re-renders when isLoading changes
const isLoading = useRouterState({ 
  select: (s) => s.isLoading 
})

const metadata = useMatches({
  select: (matches) => matches.map(m => m.context?.metadata),
  structuralSharing: true, // Prevents unnecessary re-renders
})

const selector = useCallback(
  (state) => computeExpensiveValue(state),
  [dependencies]
)

const value = useRouterState({ select: selector })