@idealyst/navigation 1.0.97 → 1.0.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.0.97",
+  "version": "1.0.98",
   "description": "Cross-platform navigation library for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -43,8 +43,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.97",
-    "@idealyst/theme": "^1.0.97",
+    "@idealyst/components": "^1.0.98",
+    "@idealyst/theme": "^1.0.98",
     "@react-navigation/bottom-tabs": ">=7.0.0",
     "@react-navigation/drawer": ">=7.0.0",
     "@react-navigation/native": ">=7.0.0",
@@ -60,10 +60,10 @@
     "react-router-dom": ">=6.0.0"
   },
   "devDependencies": {
-    "@idealyst/components": "^1.0.97",
+    "@idealyst/components": "^1.0.98",
     "@idealyst/datagrid": "^1.0.93",
     "@idealyst/datepicker": "^1.0.93",
-    "@idealyst/theme": "^1.0.97",
+    "@idealyst/theme": "^1.0.98",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "react": "^19.1.0",

package/src/routing/router.web.tsx

@@ -1,47 +1,91 @@
-import React, { useEffect, useState } from 'react'
-import { Routes, Route, useLocation, useParams, useNavigate } from '../router'
+import React, { useEffect, useState, useRef } from 'react'
+import { Routes, Route, useLocation, useParams } from '../router'
 import { DefaultStackLayout } from '../layouts/DefaultStackLayout'
 import { DefaultTabLayout } from '../layouts/DefaultTabLayout'
 import { NavigatorParam, RouteParam, NotFoundComponentProps } from './types'
 import { NavigateParams } from '../context/types'
 
 /**
- * Wrapper component for notFoundComponent that:
+ * Wrapper component for catch-all routes that:
  * 1. Checks onInvalidRoute handler first
- * 2. If handler returns NavigateParams, redirects
- * 3. If handler returns undefined or no handler, renders notFoundComponent
+ * 2. If handler returns NavigateParams, redirects (using absolute path)
+ * 3. If handler returns undefined or no handler, renders notFoundComponent (if provided)
  */
 const NotFoundWrapper = ({
     component: Component,
     onInvalidRoute
 }: {
-    component: React.ComponentType<NotFoundComponentProps>
+    component?: React.ComponentType<NotFoundComponentProps>
     onInvalidRoute?: (path: string) => NavigateParams | undefined
 }) => {
     const location = useLocation()
     const params = useParams()
-    const navigate = useNavigate()
     const [shouldRender, setShouldRender] = useState(false)
+    const redirectingRef = useRef(false)
+    const lastPathRef = useRef(location.pathname)
 
     useEffect(() => {
+        // Reset state if path changed (navigated to a different invalid route)
+        if (lastPathRef.current !== location.pathname) {
+            lastPathRef.current = location.pathname
+            redirectingRef.current = false
+            setShouldRender(false)
+        }
+
+        // Prevent multiple redirects
+        if (redirectingRef.current) {
+            return
+        }
+
         // Check if handler wants to redirect
         if (onInvalidRoute) {
             const redirectParams = onInvalidRoute(location.pathname)
             if (redirectParams) {
-                // Handler returned NavigateParams - redirect
-                navigate(redirectParams.path, { replace: redirectParams.replace ?? true })
+                // Mark as redirecting to prevent loops
+                redirectingRef.current = true
+
+                // Handler returned NavigateParams - redirect using absolute path
+                // Ensure path starts with / for absolute navigation
+                let targetPath = redirectParams.path
+                if (!targetPath.startsWith('/')) {
+                    targetPath = `/${targetPath}`
+                }
+
+                // Substitute any vars in the path
+                if (redirectParams.vars) {
+                    Object.entries(redirectParams.vars).forEach(([key, value]) => {
+                        targetPath = targetPath.replace(`:${key}`, value)
+                    })
+                }
+
+                // Use window.history for truly absolute navigation
+                // React Router's navigate can have issues in catch-all contexts
+                const replaceMode = redirectParams.replace ?? true
+                if (replaceMode) {
+                    window.history.replaceState(null, '', targetPath)
+                } else {
+                    window.history.pushState(null, '', targetPath)
+                }
+                // Trigger React Router to sync with the new URL
+                window.dispatchEvent(new PopStateEvent('popstate'))
                 return
             }
         }
-        // No redirect - show the 404 component
+        // No redirect - show the 404 component (if provided)
         setShouldRender(true)
-    }, [location.pathname, onInvalidRoute, navigate])
+    }, [location.pathname, onInvalidRoute])
 
     // Don't render until we've checked the handler
     if (!shouldRender) {
         return null
     }
 
+    // If no component provided, render nothing (handler-only mode)
+    if (!Component) {
+        console.warn(`[Navigation] Invalid route "${location.pathname}" - no notFoundComponent configured and onInvalidRoute returned undefined`)
+        return null
+    }
+
     return <Component path={location.pathname} params={params as Record<string, string>} />
 }
 
@@ -99,8 +143,8 @@ const buildRoute = (params: RouteParam, index: number, isNested = false) => {
         // Build child routes including catch-all for 404
         const childRoutes = params.routes.map((child, childIndex) => buildRoute(child, childIndex, true));
 
-        // Add catch-all route for notFoundComponent if configured
-        if (params.notFoundComponent) {
+        // Add catch-all route if notFoundComponent or onInvalidRoute is configured
+        if (params.notFoundComponent || params.onInvalidRoute) {
             childRoutes.push(
                 <Route
                     key="__notFound__"