ManifestRouter

A React Router wrapper with automatic basename detection for Manifest preview environments.

Installation

npm install manifest-router

Note: This package requires react, react-dom, and react-router-dom as peer dependencies.

npm install react react-dom react-router-dom

Usage

Basic Usage

Replace BrowserRouter with ManifestRouter in your app:

import { ManifestRouter } from 'manifest-router';
import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';

function App() {
  return (
    <ManifestRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </ManifestRouter>
  );
}

export default App;

Custom Basename

You can override the automatic basename detection:

<ManifestRouter basename="/custom-path">
  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
</ManifestRouter>

Using the Utility Function

If you need more control, you can use the getRouterBasename utility directly:

import { BrowserRouter } from 'react-router-dom';
import { getRouterBasename } from 'manifest-router';

function App() {
  const basename = getRouterBasename();

  return (
    <BrowserRouter basename={basename}>
      {/* your routes */}
    </BrowserRouter>
  );
}

How It Works

ManifestRouter automatically detects the correct basename for your application based on the URL pattern:

• /preview/* paths → basename: /preview
• /app/[something]/preview/* paths → basename: /app/[something]/preview
• All other paths → basename: empty string

This ensures your React Router routes work correctly in Manifest preview environments without manual configuration.

API

<ManifestRouter>

Props:

• children (ReactNode) - Your app's route components
• basename (string, optional) - Override automatic basename detection
• ...routerProps - Any additional props are passed to BrowserRouter

getRouterBasename()

Returns: string - The computed basename for the current URL

A utility function that calculates the appropriate basename based on the current window location.

License

MIT