Jeliq App SDK React Router

This package is designed for using React Router v7 in applications generated with Jeliq.

Installation

$ pnpm add @jeliq/app-sdk-react-router

Package Structure

This package exports the following components and utilities:

Providers / Hooks / Components (src/*)

• NavigationProvider: A provider component that manages the navigation state across the application.
• useNavigation / useRouter: React hooks that provide the current navigation state and navigation functions.
• Link: A link component that wraps React Router's Link component, adapted to work with Jeliq's routing configuration.

Utilities

• matcher: A function that extracts all route URLs from routing configuration.

Usage

import { NavigationProvider, useRouter, Link } from '@jeliq/app-sdk-react-router';

// Wrap your app with NavigationProvider (inside AppContextProvider and React Router)
<NavigationProvider>
  <App />
</NavigationProvider>

// Use the useRouter hook
const [{ activeRoute, href }, { navigate }] = useRouter();
navigate('Chat', { sessionId: '123' });

// Use the Link component
<Link routeID="Chat" params={{ sessionId: '123' }}>Go to Chat</Link>

Differences from @jeliq/app-sdk-next-router

• Uses react-router (v7+) instead of next/navigation
• No code generation script (routes are defined via React Router's file-based routing)
• Link component renders React Router's <Link> instead of Next.js's <Link>

License

MIT

Related Links

• Jeliq Official Website