React Example: React Router

Source URL: https://tanstack.com/query/latest/docs/framework/react/examples/react-router

TanStack

Query v5v5

AlphaTry TanStack CLI

Search…

K

Auto

Log In

StartRC

StartRC

Router

Router

Query

Query

Table

Table

DBbeta

DBbeta

AIalpha

AIalpha

Formnew

Formnew

Virtual

Virtual

Pacerbeta

Pacerbeta

Hotkeysalpha

Hotkeysalpha

Storealpha

Storealpha

Devtoolsalpha

Devtoolsalpha

CLIalpha

CLIalpha

More Libraries

More Libraries

BuilderAlpha

BuilderAlpha

FeedBeta

FeedBeta

Maintainers

Maintainers

Partners

Partners

Showcase

Showcase

Blog

Blog

LearnNEW

LearnNEW

Support

Support

Stats

Stats

Discord

Discord

Merch

Merch

GitHub

GitHub

Ethos

Ethos

Tenets

Tenets

Brand Guide

Brand Guide

Docs

Partners

React

Latest

Search…

K

• Home

• Frameworks

• Contributors

• NPM Stats

• Community Resources

• GitHub

• Discord

• Overview

• Installation

• Quick Start

• Devtools

• Comparison

• TypeScript

• GraphQL

• React Native

• Important Defaults

• Queries

• Query Keys

• Query Functions

• Query Options

• Network Mode

• Parallel Queries

• Dependent Queries

• Background Fetching Indicators

• Window Focus Refetching

• Disabling/Pausing Queries

• Query Retries

• Paginated Queries

• Infinite Queries

• Initial Query Data

• Placeholder Query Data

• Mutations

• Query Invalidation

• Invalidation from Mutations

• Updates from Mutation Responses

• Optimistic Updates

• Query Cancellation

• Scroll Restoration

• Filters

• Performance & Request Waterfalls

• Prefetching & Router Integration

• Server Rendering & Hydration

• Advanced Server Rendering

• Caching

• Render Optimizations

• Default Query Fn

• Suspense

• Testing

• Does this replace [Redux, MobX, etc]?

• Migrating to v3

• Migrating to v4

• Migrating to v5

• QueryClient

• QueryCache

• MutationCache

• QueryObserver

• InfiniteQueryObserver

• QueriesObserver

• streamedQuery

• focusManager

• onlineManager

• notifyManager

• timeoutManager

• useQuery

• useQueries

• useInfiniteQuery

• useMutation

• useIsFetching

• useIsMutating

• useMutationState

• useSuspenseQuery

• useSuspenseInfiniteQuery

• useSuspenseQueries

• QueryClientProvider

• useQueryClient

• queryOptions

• infiniteQueryOptions

• mutationOptions

• usePrefetchQuery

• usePrefetchInfiniteQuery

• QueryErrorResetBoundary

• useQueryErrorResetBoundary

• hydration

• ESLint Plugin Query

• Exhaustive Deps

• Stable Query Client

• No Rest Destructuring

• No Unstable Deps

• Infinite Query Property Order

• No void Query Functions

• Mutation Property Order

• Simple

• Basic

• Basic w/ GraphQL-Request

• Auto Refetching / Polling / Realtime

• Optimistic Updates (UI)

• Optimistic Updates (Cache)

• Pagination

• Load-More & Infinite Scroll

• Infinite query with Max pages

• Suspense

• Default Query Function

• Playground

• Prefetching

• Star Wars

• Rick And Morty

• Next.js Pages

• Next.js app with prefetching

• Next.js app with streaming

• React Native

• React Router

• Offline Queries and Mutations

• Algolia

• Shadow DOM

• Devtools Embedded Panel

• Chat example (streaming)

• persistQueryClient

• createSyncStoragePersister

• createAsyncStoragePersister

• broadcastQueryClient (Experimental)

• createPersister (Experimental)

latest

React

Latest

• Home

• Frameworks

• Contributors

• NPM Stats

• Community Resources

• GitHub

• Discord

• Overview

• Installation

• Quick Start

• Devtools

• Comparison

• TypeScript

• GraphQL

• React Native

• Important Defaults

• Queries

• Query Keys

• Query Functions

• Query Options

• Network Mode

• Parallel Queries

• Dependent Queries

• Background Fetching Indicators

• Window Focus Refetching

• Disabling/Pausing Queries

• Query Retries

• Paginated Queries

• Infinite Queries

• Initial Query Data

• Placeholder Query Data

• Mutations

• Query Invalidation

• Invalidation from Mutations

• Updates from Mutation Responses

• Optimistic Updates

• Query Cancellation

• Scroll Restoration

• Filters

• Performance & Request Waterfalls

• Prefetching & Router Integration

• Server Rendering & Hydration

• Advanced Server Rendering

• Caching

• Render Optimizations

• Default Query Fn

• Suspense

• Testing

• Does this replace [Redux, MobX, etc]?

• Migrating to v3

• Migrating to v4

• Migrating to v5

• QueryClient

• QueryCache

• MutationCache

• QueryObserver

• InfiniteQueryObserver

• QueriesObserver

• streamedQuery

• focusManager

• onlineManager

• notifyManager

• timeoutManager

• useQuery

• useQueries

• useInfiniteQuery

• useMutation

• useIsFetching

• useIsMutating

• useMutationState

• useSuspenseQuery

• useSuspenseInfiniteQuery

• useSuspenseQueries

• QueryClientProvider

• useQueryClient

• queryOptions

• infiniteQueryOptions

• mutationOptions

• usePrefetchQuery

• usePrefetchInfiniteQuery

• QueryErrorResetBoundary

• useQueryErrorResetBoundary

• hydration

• ESLint Plugin Query

• Exhaustive Deps

• Stable Query Client

• No Rest Destructuring

• No Unstable Deps

• Infinite Query Property Order

• No void Query Functions

• Mutation Property Order

• Simple

• Basic

• Basic w/ GraphQL-Request

• Auto Refetching / Polling / Realtime

• Optimistic Updates (UI)

• Optimistic Updates (Cache)

• Pagination

• Load-More & Infinite Scroll

• Infinite query with Max pages

• Suspense

• Default Query Function

• Playground

• Prefetching

• Star Wars

• Rick And Morty

• Next.js Pages

• Next.js app with prefetching

• Next.js app with streaming

• React Native

• React Router

• Offline Queries and Mutations

• Algolia

• Shadow DOM

• Devtools Embedded Panel

• Chat example (streaming)

• persistQueryClient

• createSyncStoragePersister

• createAsyncStoragePersister

• broadcastQueryClient (Experimental)

• createPersister (Experimental)

React Example: React Router

Github StackBlitz CodeSandbox

Code ExplorerCode

Interactive SandboxSandbox

• public

• src

  • routes

    • contact.tsx

    • destroy.tsx

    • edit.tsx

    • index.tsx

    • new.tsx

    • root.tsx

  • contacts.ts

  • error-page.tsx

  • index.css

  • index.tsx

• .eslintrc

• .gitignore

• README.md

• index.html

• package.json

• tsconfig.json

tsx

    export default function Index() {
      return (
        <p id="zero-state">
          This is a demo for integrating React Router with React Query.
          Check out{' '}
          <a href="https://reactrouter.com/">
            the docs at reactrouter.com
          </a> and{' '}
          <a href="https://tanstack.com/query/v5/docs/">the docs at tanstack.com</a>
          .
        </p>
      )
    }

[Want to Skip the Docs?

“If you’re serious about really understanding React Query, there’s no better way than with query.gg”—Tanner Linsley

Learn More](https://query.gg?s=tanstack)