diff --git a/example/src/App.tsx b/example/src/App.tsx
index 1225d3a..4d36312 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -28,7 +28,7 @@ function Routes() {
         animation,
         gestureDirection: "horizontal"
       },
-      initialPath: '.',
+      initialPathname: '.',
       basePath: '/(react-motion-router/)?',
       disableBrowserRouting: isPWA() && isIOS(),
     }}>
diff --git a/example/src/Screens/Overlays/index.tsx b/example/src/Screens/Overlays/index.tsx
index c687968..1300236 100644
--- a/example/src/Screens/Overlays/index.tsx
+++ b/example/src/Screens/Overlays/index.tsx
@@ -34,7 +34,7 @@ export default function Overlays(props: OverlaysProps) {
             <div style={{ position: "absolute", width: "100vw", height: "100vh" }}>
                 <Stack.Router config={{
                     disableBrowserRouting: isPWA() && isIOS(),
-                    initialPath: '.'
+                    initialPathname: '.'
                 }}>
                     <Stack.Screen component={Home} path="." config={{
                         animation: HomeAnimation,
diff --git a/example/src/Screens/Slides/index.tsx b/example/src/Screens/Slides/index.tsx
index bfdce2c..b36884d 100644
--- a/example/src/Screens/Slides/index.tsx
+++ b/example/src/Screens/Slides/index.tsx
@@ -9,13 +9,13 @@ import { SwipeStartEvent, SwipeEvent, SwipeEndEvent } from 'web-gesture-events';
 import { bindKeyboard } from 'react-swipeable-views-utils';
 import SwipeableViews from 'react-swipeable-views';
 
-interface SlidesProps extends ScreenComponentProps<{ hero: number; }> { }
+interface SlidesProps extends ScreenComponentProps<{ hero: string; }> { }
 
 const KeyboardSwipeableViews = bindKeyboard(SwipeableViews);
 
 let isFirstLoad = false;
 export default function Slides(props: SlidesProps) {
-    const [index, setIndex] = useState(props.route.params.hero);
+    const [index, setIndex] = useState(Number(props.route.params.hero));
     let y = 0;
 
     const onSwipeStart = (e: SwipeStartEvent) => {
diff --git a/packages/core/src/RouterBase.tsx b/packages/core/src/RouterBase.tsx
index e215a6e..968cc92 100644
--- a/packages/core/src/RouterBase.tsx
+++ b/packages/core/src/RouterBase.tsx
@@ -4,7 +4,6 @@ import {
     ScreenChild,
     RouterBaseEventMap,
     RouterHTMLElement,
-    ScreenState
 } from './common/types';
 import { NestedRouterContext, RouterContext } from './RouterContext';
 import { dispatchEvent, matchRoute, resolveBaseURLFromPattern } from './common/utils';
@@ -69,18 +68,23 @@ export abstract class RouterBase<P extends RouterBaseProps = RouterBaseProps, S
     }
 
     private handleNavigationDispatch = (e: NavigateEvent) => {
-        let router: RouterBase = this;
+        const activeRouters = [...this.#activeRoutersIter()];
         // travel down router tree to find a router that can intercept
-        while (router?.child) {
-            if (router.child.canIntercept(e))
-                router = router.child;
-        }
-        if (router.canIntercept(e)) {
-            router.intercept(e);
+        const interceptor = activeRouters.findLast(router => router.canIntercept(e));
+        if (interceptor) {
+            interceptor.intercept(e);
             this.hasUAVisualTransition = e.hasUAVisualTransition;
         }
     }
 
+    *#activeRoutersIter() {
+        let router: RouterBase | null = this;
+        while (router) {
+            yield router;
+            router = router.child;
+        }
+    }
+
     getRouterById(routerId: string, target?: RouterBase): RouterBase | null {
         const router = target ?? RouterBase.rootRouterRef?.deref();
         if (router!.id === routerId) {
@@ -166,7 +170,14 @@ export abstract class RouterBase<P extends RouterBaseProps = RouterBaseProps, S
 
     get baseURLPattern() {
         let baseURL = window.location.origin + "/";
-        let basePathname = this.props.config?.basePath ?? ".";
+        let basePath = this.props.config?.basePath;
+        if (!basePath) {
+            if (this.isRoot) {
+                basePath = "/";
+            } else {
+                basePath = ".";
+            }
+        }
 
         if (this.parent && this.parentScreen) {
             const { resolvedPathname = window.location.pathname, path } = this.parentScreen;
@@ -178,7 +189,7 @@ export abstract class RouterBase<P extends RouterBaseProps = RouterBaseProps, S
             )!.href;
         }
 
-        return new URLPattern({ baseURL, pathname: basePathname });
+        return new URLPattern({ baseURL, pathname: basePath });
     }
 
     get pathPatterns() {
diff --git a/packages/core/src/common/utils.ts b/packages/core/src/common/utils.ts
index 0f7c2eb..1ad9e63 100644
--- a/packages/core/src/common/utils.ts
+++ b/packages/core/src/common/utils.ts
@@ -1,5 +1,6 @@
 import { cloneElement, lazy as ReactLazy } from "react";
 import { ClonedElementType, ElementPropType, LazyExoticComponent, MatchedRoute, PathPattern } from "./types";
+import { RouterBase } from "../RouterBase";
 
 export function resolveBaseURLFromPattern(pattern: string, pathname: string) {
     if (!pattern.endsWith("**")) pattern += '**'; // allows us to match nested routes
diff --git a/packages/stack/src/Router.tsx b/packages/stack/src/Router.tsx
index f3454ae..f6a204f 100644
--- a/packages/stack/src/Router.tsx
+++ b/packages/stack/src/Router.tsx
@@ -14,7 +14,7 @@ import { PromiseWrapper } from './common/promise-wrapper';
 export interface RouterConfig extends RouterBaseConfig {
     screenConfig?: ScreenConfig;
     disableBrowserRouting?: boolean;
-    initialPath?: string;
+    initialPathname?: string;
     shouldIntercept?(navigateEvent: NavigateEvent): boolean;
     onIntercept?(navigateEvent: NavigateEvent): void;
 }
@@ -332,21 +332,21 @@ export class Router extends RouterBase<RouterProps, RouterState, RouterEventMap>
 
             return new Promise<void>((resolve, reject) => startTransition(() => {
                 this.setState({ screenStack, fromKey, transition, destinationKey }, async () => {
-                    const { initialPath } = this.props.config ?? {};
+                    const { initialPathname } = this.props.config ?? {};
                     const [firstEntry] = entries;
                     if (
-                        initialPath
+                        initialPathname
                         && entries.length === 1
                         && firstEntry.url
                         && !matchRoute(
-                            initialPath,
+                            initialPathname,
                             firstEntry.url.pathname,
                             this.baseURLPattern.pathname
                         )
                     ) {
                         const transitionFinished = window.navigation.transition?.finished ?? Promise.resolve();
                         transitionFinished.then(() => {
-                            this.navigation.replace(initialPath).finished.then(() => {
+                            this.navigation.replace(initialPathname).finished.then(() => {
                                 const state = e.destination.getState() as HistoryEntryState ?? {};
                                 this.navigation.push(e.destination.url, state);
                             });