---
title: MinisRouter
description: >-
  MinisRouter is the main routing component for Shop Minis that wraps React
  Router's BrowserRouter and provides optional support for smooth navigation
  transitions using the CSS View Transitions API. It should be placed at the
  root of your application to enable client-side routing.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/navigation/minisrouter'
  md: 'https://shopify.dev/docs/api/shop-minis/components/navigation/minisrouter.md'
---

# Minis​Router

MinisRouter is the main routing component for Shop Minis that wraps React Router's BrowserRouter and provides optional support for smooth navigation transitions using the CSS View Transitions API. It should be placed at the root of your application to enable client-side routing.

## Props

* **basename**

  **string**

* **children**

  **React.ReactNode**

* **viewTransitions**

  **boolean**

* **window**

  **Window**

Examples

### Examples

* #### Basic usage

  ##### Default

  ```tsx
  import React from 'react'
  import {MinisRouter} from '@shopify/shop-minis-react'
  import {Routes, Route} from 'react-router'

  import {HomePage, ProductPage, CartPage} from './pages'

  function App() {
    return (
      <MinisRouter>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/products/:id" element={<ProductPage />} />
          <Route path="/cart" element={<CartPage />} />
        </Routes>
      </MinisRouter>
    )
  }

  export default App
  ```

* #### Basic routing

  ##### Description

  Basic routing setup without transitions

  ##### Default

  ```tsx
  import React from 'react'
  import {MinisRouter} from '@shopify/shop-minis-react'
  import {Routes, Route} from 'react-router'

  import {HomePage, ProductPage, CartPage} from './pages'

  function App() {
    return (
      <MinisRouter>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/products/:id" element={<ProductPage />} />
          <Route path="/cart" element={<CartPage />} />
        </Routes>
      </MinisRouter>
    )
  }

  export default App
  ```

* #### With view transitions

  ##### Description

  Enable smooth navigation transitions with CSS View Transitions API

  ##### Default

  ```tsx
  import React from 'react'
  import {MinisRouter} from '@shopify/shop-minis-react'
  import {Routes, Route} from 'react-router'

  import {HomePage} from './HomePage'
  import {ProductPage} from './ProductPage'
  import {CartPage} from './CartPage'

  function App() {
    return (
      // Enable view transitions for smooth navigation animations
      <MinisRouter viewTransitions>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/products/:id" element={<ProductPage />} />
          <Route path="/cart" element={<CartPage />} />
        </Routes>
      </MinisRouter>
    )
  }

  export default App
  ```

* #### Full navigation example

  ##### Description

  Complete navigation setup with TransitionLink components

  ##### Default

  ```tsx
  import React from 'react'
  import {
    MinisRouter,
    TransitionLink,
    useNavigateWithTransition,
  } from '@shopify/shop-minis-react'
  import {Routes, Route} from 'react-router'
  import {Button} from '@shopify/shop-minis-react'

  function HomePage() {
    const navigateWithTransition = useNavigateWithTransition()

    return (
      <div>
        <h1>Home</h1>

        {/* Use TransitionLink for smooth navigation with transitions */}
        <TransitionLink to="/products/123">View Product</TransitionLink>

        {/* Or use the hook for programmatic navigation */}
        <Button onPress={() => navigateWithTransition('/cart')}>
          Go to Cart
        </Button>
      </div>
    )
  }

  function ProductPage() {
    const navigateWithTransition = useNavigateWithTransition()

    return (
      <div>
        <h1>Product Details</h1>

        {/* Navigate back with smooth transition */}
        <Button onPress={() => navigateWithTransition(-1)}>Go Back</Button>
      </div>
    )
  }

  function App() {
    return (
      // Enable view transitions for the entire app
      <MinisRouter viewTransitions>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/products/:id" element={<ProductPage />} />
          <Route path="/cart" element={<div>Cart Page</div>} />
        </Routes>
      </MinisRouter>
    )
  }

  export default App
  ```