@amazon-devices/react-navigation__native 7.0.1758683737 → 8.0.9000000000

package/lib/typescript/src/useThenable.d.ts

@@ -1,2 +1,2 @@
-export default function useThenable<T>(create: () => PromiseLike<T>): [boolean, T | undefined];
+export declare function useThenable<T>(create: () => PromiseLike<T>): [boolean, T | undefined];
 //# sourceMappingURL=useThenable.d.ts.map

package/lib/typescript/src/useThenable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThenable.d.ts","sourceRoot":"","sources":["../../../src/useThenable.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC,CAAC,CAAC,4BAsClE"}
+{"version":3,"file":"useThenable.d.ts","sourceRoot":"","sources":["../../../src/useThenable.tsx"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC,CAAC,CAAC,4BAuC1D"}

package/package.json

@@ -1 +1 @@
-{"name": "@amazon-devices/react-navigation__native", "description": "React Native integration for React Navigation", "version": "7.0.1758683737+6.1.9", "keywords": ["react-native", "react-navigation", "ios", "android"], "license": "See license in LICENSE", "repository": {"type": "git", "url": "https://github.com/react-navigation/react-navigation.git", "directory": "packages/native"}, "bugs": {"url": "https://github.com/react-navigation/react-navigation/issues"}, "homepage": "https://reactnavigation.org", "main": "lib/commonjs/index.js", "react-native": "src/index.tsx", "source": "src/index.tsx", "module": "lib/module/index.js", "types": "lib/typescript/src/index.d.ts", "files": ["src", "lib", "!**/__tests__", "kepler-compatibility.json", "SystemModules", "SystemBundles", "THIRD_PARTY_NOTICES.txt", "kepler-transformed-package-info.json"], "sideEffects": false, "kepler": {"temporary-alias-for-package": {"name": "@react-navigation/native", "version": "6.1.9"}}, "publishConfig": {"access": "public"}, "scripts": {"clean": "del lib"}, "dependencies": {"@amazon-devices/react-navigation__core": "^7.0.0", "@amazon-devices/react-navigation__routers": "^7.0.0", "escape-string-regexp": "4.0.0", "fast-deep-equal": "3.1.3", "nanoid": "3.1.23"}, "devDependencies": {"@testing-library/react-native": "11.5.4", "@types/react": "17.0.2", "@types/react-dom": "18.0.10", "@types/jest": "26.0.15", "del-cli": "5.0.0", "react": "17.0.2", "react-dom": "18.2.0", "react-native": "0.72.0", "react-native-builder-bob": "0.20.4", "typescript": "4.9.4"}, "peerDependencies": {"react": "*", "react-native": "*"}, "react-native-builder-bob": {"source": "src", "output": "lib", "targets": ["commonjs", "module", ["typescript", {"project": "tsconfig.build.json"}]]}}
+{"name": "@amazon-devices/react-navigation__native", "description": "React Native integration for React Navigation", "version": "8.0.9000000000+7.1.22", "keywords": ["react-native", "react-navigation", "ios", "android"], "license": "See license in LICENSE", "repository": {"type": "git", "url": "https://github.com/react-navigation/react-navigation.git", "directory": "packages/native"}, "bugs": {"url": "https://github.com/react-navigation/react-navigation/issues"}, "homepage": "https://reactnavigation.org", "main": "./lib/module/index.js", "types": "./lib/typescript/src/index.d.ts", "exports": {".": {"source": "./src/index.tsx", "types": "./lib/typescript/src/index.d.ts", "default": "./lib/module/index.js"}, "./package.json": "./package.json"}, "files": ["src", "lib", "!**/__tests__", "kepler-compatibility.json", "SystemModules", "SystemBundles", "kepler-transformed-package-info.json"], "sideEffects": false, "kepler": {"temporary-alias-for-package": {"name": "@react-navigation/native", "version": "7.0.14"}}, "publishConfig": {"access": "public"}, "scripts": {"clean": "del lib"}, "dependencies": {"@amazon-devices/react-navigation__routers": "^8.0.1", "@amazon-devices/react-navigation__core": "^8.0.1", "escape-string-regexp": "^4.0.0", "fast-deep-equal": "^3.1.3", "nanoid": "^3.3.11", "use-latest-callback": "^0.2.4"}, "devDependencies": {"@jest/globals": "^30.0.0", "@testing-library/react-native": "^13.2.0", "@types/react": "~19.0.10", "@types/react-dom": "~19.1.3", "del-cli": "^6.0.0", "react": "19.0.0", "react-dom": "19.0.0", "react-native": "0.79.3", "react-native-builder-bob": "^0.40.12", "react-test-renderer": "19.0.0", "typescript": "^5.8.3"}, "peerDependencies": {"react": ">= 18.2.0", "react-native": "*"}, "react-native-builder-bob": {"source": "src", "output": "lib", "targets": [["module", {"esm": true}], ["typescript", {"project": "tsconfig.build.json"}]]}}

package/src/Link.tsx

@@ -1,36 +1,48 @@
-import type { NavigationAction } from '@amazon-devices/react-navigation__core';
+import { useTheme } from '@amazon-devices/react-navigation__core';
 import * as React from 'react';
-import { GestureResponderEvent, Platform, Text, TextProps } from 'react-native';
+import {
+  type GestureResponderEvent,
+  Platform,
+  Text,
+  type TextProps,
+} from 'react-native';
 
-import useLinkProps from './useLinkProps';
-import type { To } from './useLinkTo';
+import { type LinkProps, useLinkProps } from './useLinkProps';
 
-type Props<ParamList extends ReactNavigation.RootParamList> = {
-  to: To<ParamList>;
-  action?: NavigationAction;
-  target?: string;
-  onPress?: (
-    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
-  ) => void;
-} & (Omit<TextProps, 'disabled'> & {
-  disabled?: boolean | null;
-  children: React.ReactNode;
-});
+type Props<ParamList extends ReactNavigation.RootParamList> =
+  LinkProps<ParamList> &
+    Omit<TextProps, 'disabled'> & {
+      target?: string;
+      onPress?: (
+        e:
+          | React.MouseEvent<HTMLAnchorElement, MouseEvent>
+          | GestureResponderEvent
+      ) => void;
+      disabled?: boolean | null;
+      children: React.ReactNode;
+    };
 
 /**
  * Component to render link to another screen using a path.
  * Uses an anchor tag on the web.
  *
- * @param props.to Absolute path to screen (e.g. `/feeds/hot`).
+ * @param props.screen Name of the screen to navigate to (e.g. `'Feeds'`).
+ * @param props.params Params to pass to the screen to navigate to (e.g. `{ sort: 'hot' }`).
+ * @param props.href Optional absolute path to use for the href (e.g. `/feeds/hot`).
  * @param props.action Optional action to use for in-page navigation. By default, the path is parsed to an action based on linking config.
  * @param props.children Child elements to render the content.
  */
-export default function Link<ParamList extends ReactNavigation.RootParamList>({
-  to,
+export function Link<ParamList extends ReactNavigation.RootParamList>({
+  screen,
+  params,
   action,
+  href,
+  style,
   ...rest
 }: Props<ParamList>) {
-  const props = useLinkProps<ParamList>({ to, action });
+  const { colors, fonts } = useTheme();
+  // @ts-expect-error: This is already type-checked by the prop types
+  const props = useLinkProps<ParamList>({ screen, params, action, href });
 
   const onPress = (
     e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
@@ -39,7 +51,10 @@ export default function Link<ParamList extends ReactNavigation.RootParamList>({
       rest.onPress?.(e);
     }
 
-    props.onPress(e);
+    // Let user prevent default behavior
+    if (!e.defaultPrevented) {
+      props.onPress(e);
+    }
   };
 
   return React.createElement(Text, {
@@ -49,5 +64,6 @@ export default function Link<ParamList extends ReactNavigation.RootParamList>({
       web: { onClick: onPress } as any,
       default: { onPress },
     }),
+    style: [{ color: colors.primary }, fonts.regular, style],
   });
 }

package/src/LinkingContext.tsx

@@ -3,10 +3,14 @@ import * as React from 'react';
 
 import type { LinkingOptions } from './types';
 
-const LinkingContext = React.createContext<{
-  options: LinkingOptions<ParamListBase> | undefined;
-}>({ options: undefined });
+const MISSING_CONTEXT_ERROR = "Couldn't find a LinkingContext context.";
 
-LinkingContext.displayName = 'LinkingContext';
+export const LinkingContext = React.createContext<{
+  options?: LinkingOptions<ParamListBase>;
+}>({
+  get options(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+});
 
-export default LinkingContext;
+LinkingContext.displayName = 'LinkingContext';

package/src/LocaleDirContext.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import type { LocaleDirection } from './types';
+
+export const LocaleDirContext = React.createContext<LocaleDirection>('ltr');
+
+LocaleDirContext.displayName = 'LocaleDirContext';

package/src/NavigationContainer.tsx

@@ -3,21 +3,30 @@ import {
   getActionFromState,
   getPathFromState,
   getStateFromPath,
-  NavigationContainerProps,
-  NavigationContainerRef,
-  ParamListBase,
+  type NavigationContainerProps,
+  type NavigationContainerRef,
+  type NavigationState,
+  type ParamListBase,
+  ThemeProvider,
   validatePathConfig,
 } from '@amazon-devices/react-navigation__core';
 import * as React from 'react';
-
-import LinkingContext from './LinkingContext';
-import DefaultTheme from './theming/DefaultTheme';
-import ThemeProvider from './theming/ThemeProvider';
-import type { DocumentTitleOptions, LinkingOptions, Theme } from './types';
-import useBackButton from './useBackButton';
-import useDocumentTitle from './useDocumentTitle';
-import useLinking from './useLinking';
-import useThenable from './useThenable';
+import { I18nManager } from 'react-native';
+import useLatestCallback from 'use-latest-callback';
+
+import { LinkingContext } from './LinkingContext';
+import { LocaleDirContext } from './LocaleDirContext';
+import { DefaultTheme } from './theming/DefaultTheme';
+import type {
+  DocumentTitleOptions,
+  LinkingOptions,
+  LocaleDirection,
+} from './types';
+import { UnhandledLinkingContext } from './UnhandledLinkingContext';
+import { useBackButton } from './useBackButton';
+import { useDocumentTitle } from './useDocumentTitle';
+import { useLinking } from './useLinking';
+import { useThenable } from './useThenable';
 
 declare global {
   var REACT_NAVIGATION_DEVTOOLS: WeakMap<
@@ -26,37 +35,50 @@ declare global {
   >;
 }
 
-global.REACT_NAVIGATION_DEVTOOLS = new WeakMap();
+globalThis.REACT_NAVIGATION_DEVTOOLS = new WeakMap();
 
 type Props<ParamList extends {}> = NavigationContainerProps & {
-  theme?: Theme;
+  /**
+   * Initial state object for the navigation tree.
+   *
+   * If this is provided, deep link or URLs won't be handled on the initial render.
+   */
+  initialState?: NavigationContainerProps['initialState'];
+  /**
+   * Text direction of the components. Defaults to `'ltr'`.
+   */
+  direction?: LocaleDirection;
+  /**
+   * Options for deep linking.
+   *
+   * Deep link handling is enabled when this prop is provided,
+   * unless `linking.enabled` is `false`.
+   */
   linking?: LinkingOptions<ParamList>;
+  /**
+   * Fallback element to render until initial state is resolved from deep linking.
+   *
+   * Defaults to `null`.
+   */
   fallback?: React.ReactNode;
+  /**
+   * Options to configure the document title on Web.
+   *
+   * Updating document title is handled by default,
+   * unless `documentTitle.enabled` is `false`.
+   */
   documentTitle?: DocumentTitleOptions;
-  onReady?: () => void;
 };
 
-/**
- * Container component which holds the navigation state designed for React Native apps.
- * This should be rendered at the root wrapping the whole app.
- *
- * @param props.initialState Initial state object for the navigation tree. When deep link handling is enabled, this will override deep links when specified. Make sure that you don't specify an `initialState` when there's a deep link (`Linking.getInitialURL()`).
- * @param props.onReady Callback which is called after the navigation tree mounts.
- * @param props.onStateChange Callback which is called with the latest navigation state when it changes.
- * @param props.theme Theme object for the navigators.
- * @param props.linking Options for deep linking. Deep link handling is enabled when this prop is provided, unless `linking.enabled` is `false`.
- * @param props.fallback Fallback component to render until we have finished getting initial state when linking is enabled. Defaults to `null`.
- * @param props.documentTitle Options to configure the document title on Web. Updating document title is handled by default unless `documentTitle.enabled` is `false`.
- * @param props.children Child elements to render the content.
- * @param props.ref Ref object which refers to the navigation object containing helper methods.
- */
 function NavigationContainerInner(
   {
+    direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
     theme = DefaultTheme,
     linking,
     fallback = null,
     documentTitle,
     onReady,
+    onStateChange,
     ...rest
   }: Props<ParamListBase>,
   ref?: React.Ref<NavigationContainerRef<ParamListBase> | null>
@@ -73,13 +95,52 @@ function NavigationContainerInner(
   useBackButton(refContainer);
   useDocumentTitle(refContainer, documentTitle);
 
-  const { getInitialState } = useLinking(refContainer, {
-    independent: rest.independent,
-    enabled: isLinkingEnabled,
-    prefixes: [],
-    ...linking,
+  const [lastUnhandledLink, setLastUnhandledLink] = React.useState<
+    string | undefined
+  >();
+
+  const { getInitialState } = useLinking(
+    refContainer,
+    {
+      enabled: isLinkingEnabled,
+      prefixes: [],
+      ...linking,
+    },
+    setLastUnhandledLink
+  );
+
+  const linkingContext = React.useMemo(() => ({ options: linking }), [linking]);
+
+  const unhandledLinkingContext = React.useMemo(
+    () => ({ lastUnhandledLink, setLastUnhandledLink }),
+    [lastUnhandledLink, setLastUnhandledLink]
+  );
+
+  const onReadyForLinkingHandling = useLatestCallback(() => {
+    // If the screen path matches lastUnhandledLink, we do not track it
+    const path = refContainer.current?.getCurrentRoute()?.path;
+    setLastUnhandledLink((previousLastUnhandledLink) => {
+      if (previousLastUnhandledLink === path) {
+        return undefined;
+      }
+      return previousLastUnhandledLink;
+    });
+    onReady?.();
   });
 
+  const onStateChangeForLinkingHandling = useLatestCallback(
+    (state: Readonly<NavigationState> | undefined) => {
+      // If the screen path matches lastUnhandledLink, we do not track it
+      const path = refContainer.current?.getCurrentRoute()?.path;
+      setLastUnhandledLink((previousLastUnhandledLink) => {
+        if (previousLastUnhandledLink === path) {
+          return undefined;
+        }
+        return previousLastUnhandledLink;
+      });
+      onStateChange?.(state);
+    }
+  );
   // Add additional linking related info to the ref
   // This will be used by the devtools
   React.useEffect(() => {
@@ -102,51 +163,49 @@ function NavigationContainerInner(
 
   const [isResolved, initialState] = useThenable(getInitialState);
 
+  // FIXME
+  // @ts-expect-error not sure why this is not working
   React.useImperativeHandle(ref, () => refContainer.current);
 
-  const linkingContext = React.useMemo(() => ({ options: linking }), [linking]);
-
-  const isReady = rest.initialState != null || !isLinkingEnabled || isResolved;
+  const isLinkingReady =
+    rest.initialState != null || !isLinkingEnabled || isResolved;
 
-  const onReadyRef = React.useRef(onReady);
-
-  React.useEffect(() => {
-    onReadyRef.current = onReady;
-  });
-
-  React.useEffect(() => {
-    if (isReady) {
-      onReadyRef.current?.();
-    }
-  }, [isReady]);
-
-  if (!isReady) {
-    // This is temporary until we have Suspense for data-fetching
-    // Then the fallback will be handled by a parent `Suspense` component
-    return fallback as React.ReactElement;
+  if (!isLinkingReady) {
+    return (
+      <LocaleDirContext.Provider value={direction}>
+        <ThemeProvider value={theme}>{fallback}</ThemeProvider>
+      </LocaleDirContext.Provider>
+    );
   }
 
   return (
-    <LinkingContext.Provider value={linkingContext}>
-      <ThemeProvider value={theme}>
-        <BaseNavigationContainer
-          {...rest}
-          initialState={
-            rest.initialState == null ? initialState : rest.initialState
-          }
-          ref={refContainer}
-        />
-      </ThemeProvider>
-    </LinkingContext.Provider>
+    <LocaleDirContext.Provider value={direction}>
+      <UnhandledLinkingContext.Provider value={unhandledLinkingContext}>
+        <LinkingContext.Provider value={linkingContext}>
+          <BaseNavigationContainer
+            {...rest}
+            theme={theme}
+            onReady={onReadyForLinkingHandling}
+            onStateChange={onStateChangeForLinkingHandling}
+            initialState={
+              rest.initialState == null ? initialState : rest.initialState
+            }
+            ref={refContainer}
+          />
+        </LinkingContext.Provider>
+      </UnhandledLinkingContext.Provider>
+    </LocaleDirContext.Provider>
   );
 }
 
-const NavigationContainer = React.forwardRef(NavigationContainerInner) as <
-  RootParamList extends {} = ReactNavigation.RootParamList
->(
+/**
+ * Container component that manages the navigation state.
+ * This should be rendered at the root wrapping the whole app.
+ */
+export const NavigationContainer = React.forwardRef(
+  NavigationContainerInner
+) as <RootParamList extends {} = ReactNavigation.RootParamList>(
   props: Props<RootParamList> & {
     ref?: React.Ref<NavigationContainerRef<RootParamList>>;
   }
 ) => React.ReactElement;
-
-export default NavigationContainer;

package/src/ServerContainer.tsx

@@ -1,7 +1,7 @@
 import { CurrentRenderContext } from '@amazon-devices/react-navigation__core';
 import * as React from 'react';
 
-import ServerContext, { ServerContextType } from './ServerContext';
+import { ServerContext, type ServerContextType } from './ServerContext';
 import type { ServerContainerRef } from './types';
 
 type Props = ServerContextType & {
@@ -15,7 +15,7 @@ type Props = ServerContextType & {
  * @param props.children Child elements to render the content.
  * @param props.ref Ref object which contains helper methods.
  */
-export default React.forwardRef(function ServerContainer(
+export const ServerContainer = React.forwardRef(function ServerContainer(
   { children, location }: Props,
   ref: React.Ref<ServerContainerRef>
 ) {
@@ -25,6 +25,7 @@ export default React.forwardRef(function ServerContainer(
     );
   }, []);
 
+  // eslint-disable-next-line @eslint-react/no-unstable-context-value
   const current: { options?: object } = {};
 
   if (ref) {
@@ -41,12 +42,12 @@ export default React.forwardRef(function ServerContainer(
     if (typeof ref === 'function') {
       ref(value);
     } else {
-      // @ts-expect-error: the TS types are incorrect and say that ref.current is readonly
       ref.current = value;
     }
   }
 
   return (
+    // eslint-disable-next-line @eslint-react/no-unstable-context-value
     <ServerContext.Provider value={{ location }}>
       <CurrentRenderContext.Provider value={current}>
         {children}

package/src/ServerContext.tsx

@@ -7,8 +7,6 @@ export type ServerContextType = {
   };
 };
 
-const ServerContext = React.createContext<ServerContextType | undefined>(
+export const ServerContext = React.createContext<ServerContextType | undefined>(
   undefined
 );
-
-export default ServerContext;

package/src/UnhandledLinkingContext.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+const MISSING_CONTEXT_ERROR =
+  "Couldn't find an UnhandledLinkingContext context.";
+
+export const UnhandledLinkingContext = React.createContext<{
+  lastUnhandledLink: string | undefined;
+  setLastUnhandledLink: (lastUnhandledUrl: string | undefined) => void;
+}>({
+  get lastUnhandledLink(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+  get setLastUnhandledLink(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+});
+
+UnhandledLinkingContext.displayName = 'UnhandledLinkingContext';

package/src/__stubs__/createStackNavigator.tsx

@@ -0,0 +1,46 @@
+import {
+  createNavigatorFactory,
+  type DefaultNavigatorOptions,
+  type NavigationListBase,
+  type ParamListBase,
+  type StackNavigationState,
+  StackRouter,
+  type TypedNavigator,
+  useNavigationBuilder,
+} from '@amazon-devices/react-navigation__core';
+
+const StackNavigator = (
+  props: DefaultNavigatorOptions<
+    ParamListBase,
+    string | undefined,
+    StackNavigationState<ParamListBase>,
+    {},
+    {},
+    unknown
+  >
+) => {
+  const { state, descriptors, NavigationContent } = useNavigationBuilder(
+    StackRouter,
+    props
+  );
+
+  return (
+    <NavigationContent>
+      {descriptors[state.routes[state.index].key].render()}
+    </NavigationContent>
+  );
+};
+
+export function createStackNavigator<
+  ParamList extends ParamListBase,
+>(): TypedNavigator<{
+  ParamList: ParamList;
+  NavigatorID: string | undefined;
+  State: StackNavigationState<ParamList>;
+  ScreenOptions: {};
+  EventMap: {};
+  NavigationList: NavigationListBase<ParamList>;
+  Navigator: typeof StackNavigator;
+}> {
+  return createNavigatorFactory(StackNavigator)();
+}

package/src/{__mocks__ → __stubs__}/window.tsx

@@ -1,4 +1,4 @@
-const location = new URL('', 'http://example.com');
+let location = new URL('', 'http://example.com');
 
 let listeners: (() => void)[] = [];
 let entries = [{ state: null, href: location.href }];
@@ -12,7 +12,7 @@ const history = {
   },
 
   pushState(state: any, _: string, path: string) {
-    Object.assign(location, new URL(path, location.origin));
+    location = new URL(path, location.origin);
 
     currentState = state;
     entries = entries.slice(0, index + 1);
@@ -21,7 +21,7 @@ const history = {
   },
 
   replaceState(state: any, _: string, path: string) {
-    Object.assign(location, new URL(path, location.origin));
+    location = new URL(path, location.origin);
 
     currentState = state;
     entries[index] = { state, href: location.href };
@@ -35,7 +35,7 @@ const history = {
       ) {
         index += n;
         const entry = entries[index];
-        Object.assign(location, new URL(entry.href));
+        location = new URL(entry.href);
         currentState = entry.state;
         listeners.forEach((cb) => cb());
       }
@@ -63,9 +63,11 @@ const removeEventListener = (type: 'popstate', listener: () => void) => {
   }
 };
 
-const window = {
+export const window = {
   document: { title: '' },
-  location,
+  get location() {
+    return location;
+  },
   history,
   addEventListener,
   removeEventListener,
@@ -73,5 +75,3 @@ const window = {
     return window;
   },
 };
-
-export default window;

package/src/createMemoryHistory.tsx

@@ -10,7 +10,7 @@ type HistoryRecord = {
   path: string;
 };
 
-export default function createMemoryHistory() {
+export function createMemoryHistory() {
   let index = 0;
   let items: HistoryRecord[] = [];
 
@@ -87,6 +87,7 @@ export default function createMemoryHistory() {
       // Need to keep the hash part of the path if there was no previous history entry
       // or the previous history entry had the same path
       let pathWithHash = path;
+      const hash = pathWithHash.includes('#') ? '' : location.hash;
 
       if (!items.length || items.findIndex((item) => item.id === id) < 0) {
         // There are two scenarios for creating an array with only one history record:
@@ -95,12 +96,13 @@ export default function createMemoryHistory() {
         //   the page when navigating forward in history.
         // - This is the first time any state modifications are done
         //   So we need to push the entry as there's nothing to replace
-        pathWithHash = pathWithHash + location.hash;
+
+        pathWithHash = pathWithHash + hash;
         items = [{ path: pathWithHash, state, id }];
         index = 0;
       } else {
         if (items[index].path === path) {
-          pathWithHash = pathWithHash + location.hash;
+          pathWithHash = pathWithHash + hash;
         }
         items[index] = { path, state, id };
       }
@@ -174,21 +176,20 @@ export default function createMemoryHistory() {
         // But on Firefox, it seems to take much longer, around 50ms from our testing
         // We're using a hacky timeout since there doesn't seem to be way to know for sure
         const timer = setTimeout(() => {
-          const index = pending.findIndex((it) => it.ref === done);
+          const foundIndex = pending.findIndex((it) => it.ref === done);
 
-          if (index > -1) {
-            pending[index].cb();
-            pending.splice(index, 1);
+          if (foundIndex > -1) {
+            pending[foundIndex].cb();
+            pending.splice(foundIndex, 1);
           }
+
+          index = this.index;
         }, 100);
 
         const onPopState = () => {
-          const id = window.history.state?.id;
-          const currentIndex = items.findIndex((item) => item.id === id);
-
           // Fix createMemoryHistory.index variable's value
           // as it may go out of sync when navigating in the browser.
-          index = Math.max(currentIndex, 0);
+          index = this.index;
 
           const last = pending.pop();
 
@@ -206,6 +207,10 @@ export default function createMemoryHistory() {
     // Here we normalize it so that only external changes (e.g. user pressing back/forward) trigger the listener
     listen(listener: () => void) {
       const onPopState = () => {
+        // Fix createMemoryHistory.index variable's value
+        // as it may go out of sync when navigating in the browser.
+        index = this.index;
+
         if (pending.length) {
           // This was triggered by `history.go(n)`, we shouldn't call the listener
           return;