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.

Anchor to propsProps

Anchor to basename basename string: Application basename
Anchor to children children React.ReactNode: components describing your route configuration
Anchor to useTransitions useTransitions boolean: Control whether router state updates are internally wrapped in 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.
Anchor to viewTransitions viewTransitions boolean
Anchor to window window Window: Window object override. Defaults to the global window instance

Examples

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 (

</Routes>

</MinisRouter>

)

}

export default App

Examples

Basic usage

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

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

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

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

Was this page helpful?