---
title: useNavigateWithTransition
description: >-
  The useNavigateWithTransition hook provides programmatic navigation with
  smooth view transitions support.
source_url:
  html: >-
    https://shopify.dev/docs/api/shop-minis/hooks/navigation/usenavigatewithtransition
  md: >-
    https://shopify.dev/docs/api/shop-minis/hooks/navigation/usenavigatewithtransition.md
---

# useNavigateWithTransition

The `useNavigateWithTransition` hook provides programmatic navigation with smooth view transitions support. It wraps React Router's `useNavigate` hook with CSS View Transitions API integration, enabling app-like page transitions when the browser supports it. Falls back gracefully to standard navigation on unsupported browsers.

Examples

### Examples

* ####

  ##### tsx

  ```tsx
  import {useNavigateWithTransition, Button} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const transitionNavigate = useNavigateWithTransition()

    const handleProductClick = () => {
      transitionNavigate('/products/123')
    }

    const handleGoBack = () => {
      transitionNavigate(-1)
    }

    return (
      <>
        <Button onClick={handleProductClick}>View Product</Button>
        <Button onClick={handleGoBack}>Go Back</Button>
      </>
    )
  }
  ```

* ####

  ##### Description

  Navigate to a specific route with smooth transition

  ##### tsx

  ```tsx
  import React from 'react'
  import {useNavigateWithTransition, Button} from '@shopify/shop-minis-react'

  function ProductActions({productId}: {productId: string}) {
    const navigateWithTransition = useNavigateWithTransition()

    const handleViewDetails = () => {
      // Navigate to product details page with smooth transition
      navigateWithTransition(`/products/${productId}`)
    }

    const handleViewCategory = (category: string) => {
      // Navigate to category page
      navigateWithTransition(`/categories/${category}`)
    }

    const handleCheckout = () => {
      // Navigate to checkout with query parameters
      navigateWithTransition('/checkout?step=shipping')
    }

    return (
      <div>
        <Button onPress={handleViewDetails}>
          View Product Details
        </Button>
        <Button onPress={() => handleViewCategory('electronics')}>
          Browse Electronics
        </Button>
        <Button onPress={handleCheckout}>
          Proceed to Checkout
        </Button>
      </div>
    )
  }

  export default ProductActions
  ```

* ####

  ##### Description

  Navigate back and forward in history with transitions

  ##### tsx

  ```tsx
  import React from 'react'
  import {useNavigateWithTransition, Button} from '@shopify/shop-minis-react'

  function NavigationControls() {
    const navigateWithTransition = useNavigateWithTransition()

    const handleGoBack = () => {
      // Navigate back one page in history with smooth transition
      navigateWithTransition(-1)
    }

    const handleGoBackTwo = () => {
      // Navigate back two pages
      navigateWithTransition(-2)
    }

    const handleGoForward = () => {
      // Navigate forward one page in history
      navigateWithTransition(1)
    }

    return (
      <div className="navigation-controls">
        <Button onPress={handleGoBack}>
          Back
        </Button>
        <Button onPress={handleGoBackTwo}>
          Back to Home
        </Button>
        <Button onPress={handleGoForward}>
          Forward
        </Button>
      </div>
    )
  }

  export default NavigationControls
  ```

* ####

  ##### Description

  Navigation with options like replace and state

  ##### tsx

  ```tsx
  import React from 'react'
  import {useNavigateWithTransition, Button} from '@shopify/shop-minis-react'

  function AdvancedNavigation() {
    const navigateWithTransition = useNavigateWithTransition()

    const handleReplaceNavigation = () => {
      // Replace current history entry instead of pushing a new one
      navigateWithTransition('/login', { replace: true })
    }

    const handleNavigationWithState = () => {
      // Pass state data to the next page
      navigateWithTransition('/checkout', {
        state: {
          from: 'product-page',
          cartItems: 3,
          timestamp: Date.now()
        }
      })
    }

    const handleConditionalNavigation = async () => {
      try {
        const isValid = await validateSession()

        if (isValid) {
          // Navigate with both replace and state options
          navigateWithTransition('/dashboard', {
            replace: true,
            state: { authenticated: true }
          })
        } else {
          navigateWithTransition('/login')
        }
      } catch (error) {
        console.error('Navigation failed:', error)
      }
    }

    return (
      <div>
        <Button onPress={handleReplaceNavigation}>
          Login (Replace History)
        </Button>
        <Button onPress={handleNavigationWithState}>
          Checkout with State
        </Button>
        <Button onPress={handleConditionalNavigation}>
          Go to Dashboard
        </Button>
      </div>
    )
  }

  // Mock validation function
  async function validateSession() {
    return new Promise<boolean>((resolve) => {
      setTimeout(() => resolve(true), 100)
    })
  }

  export default AdvancedNavigation
  ```

***