---
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.
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'
api_name: shop-minis
---

# 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**

  Application basename

* **children**

  **React.ReactNode**

  components describing your route configuration

* **use​Transitions**

  **boolean**

  Control whether router state updates are internally wrapped in [`React.startTransition`](https://react.dev/reference/react/startTransition).

  * When left `undefined`, all router state updates are wrapped in `React.startTransition`
  * When set to `true`,

  and

  navigations will be wrapped in `React.startTransition` and all router state updates are wrapped in `React.startTransition`

  * When set to `false`, the router will not leverage `React.startTransition` on any navigations or state changes.

  For more information, please see the [docs](../../explanation/react-transitions).

* **view​Transitions**

  **boolean**

* **window**

  **Window**

  [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object override. Defaults to the global `window` instance

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

***