Expo Router Compat

Expo Router API compatibility for React Router DOM. Use Expo Router's familiar API with React Router DOM under the hood.

Installation

npm install @your-org/expo-router-compat

Peer Dependencies

This package requires:

• react >= 16.8.0
• react-router-dom >= 6.0.0

Features

• LinkWrapper: Drop-in replacement for Expo Router's <Link> component
• useRouterWrapper: Hook that provides the same API as Expo Router's useRouter()
• Full TypeScript support
• Zero runtime dependencies (uses peer dependencies)

Usage

LinkWrapper

import { LinkWrapper } from '@your-org/expo-router-compat';

// Basic navigation
<LinkWrapper href="/about">Go to About</LinkWrapper>

// With parameters
<LinkWrapper href="/profile" params={{ id: 123 }}>
  Go to Profile
</LinkWrapper>

// asChild usage
<LinkWrapper href="/settings" asChild>
  <button>Settings</button>
</LinkWrapper>

useRouterWrapper

import { useRouterWrapper } from "@your-org/expo-router-compat";

function MyComponent() {
  const router = useRouterWrapper();

  return (
    <div>
      <button onClick={() => router.push("/profile")}>
        Navigate to Profile
      </button>
      <button onClick={() => router.replace("/settings")}>
        Replace with Settings
      </button>
      <button onClick={() => router.back()}>Go Back</button>
      <button onClick={() => router.setParams({ id: 42 })}>
        Set Param id=42
      </button>
    </div>
  );
}

API Reference

LinkWrapper Props

| Prop | Type | Description | | ---------- | --------------------------------------------- | ----------------------------------------------------- | | href | string | The path to navigate to | | children | React.ReactNode | Content to render inside the link | | replace | boolean | Replace current history entry instead of pushing | | push | boolean | Not used in React Router (kept for API compatibility) | | params | Record<string, string \| number \| boolean> | Query parameters to append | | asChild | boolean | Render as child component instead of anchor |

useRouterWrapper Return

| Method | Type | Description | | ----------- | --------------------------------------------------------------- | ----------------------------- | | push | (href: string) => void | Navigate to a new route | | replace | (href: string) => void | Replace current route | | back | () => void | Go back in history | | setParams | (params: Record<string, string \| number \| boolean>) => void | Update query parameters | | prefetch | (href: string) => Promise<void> | No-op (for API compatibility) | | pathname | string | Current route pathname |

Migration from Expo Router

This package is designed to be a drop-in replacement for Expo Router's navigation components. Simply replace your imports:

// Before (Expo Router)
import { Link, useRouter } from "expo-router";

// After (@your-org/expo-router-compat)
import {
  LinkWrapper as Link,
  useRouterWrapper as useRouter,
} from "@your-org/expo-router-compat";

License

MIT