---
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.
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'
---

# MinisRouter

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

* ####

  ##### tsx

  ```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
  ```

* ####

  ##### Description

  Basic routing setup without transitions

  ##### tsx

  ```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
  ```

* ####

  ##### Description

  Enable smooth navigation transitions with CSS View Transitions API

  ##### tsx

  ```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
  ```

* ####

  ##### Description

  Complete navigation setup with TransitionLink components

  ##### tsx

  ```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
  ```

***