ionic-team · ShaneK · May 8, 2025 · May 8, 2025 · May 8, 2025 · May 12, 2025
@@ -176,7 +176,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [reactrouter5]
+        apps: [reactrouter6]
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:

@@ -186,7 +186,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [reactrouter5]
+        apps: [reactrouter6]
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:

@@ -42,8 +42,8 @@
   "peerDependencies": {
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6",
-    "react-router": "^5.0.1",
-    "react-router-dom": "^5.0.1"
+    "react-router": ">=6.0.0",
+    "react-router-dom": ">=6.0.0"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",
@@ -52,16 +52,15 @@
     "@types/node": "^14.0.14",
     "@types/react": "^17.0.79",
     "@types/react-dom": "^17.0.25",
-    "@types/react-router": "^5.0.3",
-    "@types/react-router-dom": "^5.1.5",
+    "history": "^5.3.0",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
     "eslint": "^7.32.0",
     "prettier": "^2.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router": "^5.0.1",
-    "react-router-dom": "^5.0.1",
+    "react-router": "^6.30.0",
+    "react-router-dom": "^6.30.0",
     "rimraf": "^3.0.2",
     "rollup": "^4.2.0",
     "typescript": "^4.0.5"

@@ -2,14 +2,14 @@
 
 set -e
 
-# Copy ionic react dist
-rm -rf node_modules/@ionic/react/dist node_modules/@ionic/react/css
-cp -a ../react/dist node_modules/@ionic/react/dist
-cp -a ../react/css node_modules/@ionic/react/css
-cp -a ../react/package.json node_modules/@ionic/react/package.json
-
-# Copy core dist
-rm -rf node_modules/@ionic/core/dist node_modules/@ionic/core/components
-cp -a ../../core/dist node_modules/@ionic/core/dist
-cp -a ../../core/components node_modules/@ionic/core/components
-cp -a ../../core/package.json node_modules/@ionic/core/package.json
+# Delete old packages
+rm -f *.tgz
+
+# Pack @ionic/react
+npm pack ../react
+
+# Pack @ionic/core
+npm pack ../../core
+
+# Install Dependencies
+npm install *.tgz --no-save
@@ -0,0 +1,68 @@
+#!/bin/bash
+set -x
+
+# Change to script's directory
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+cd "$SCRIPT_DIR"
+
+# Inside core
+echo "Building core..."
+cd ../../../core
+npm run build
+
+# Inside packages/react
+echo "Building packages/react..."
+cd ../packages/react
+npm ci
+npm run sync
+npm run build
+
+# Inside packages/react-router
+echo "Building packages/react-router..."
+cd ../react-router
+npm ci
+npm run sync
+npm run build
+
+# Inside packages/react-router/test
+echo "Building test app..."
+cd ./test
+rm -rf build/reactrouter6 || true
+sh ./build.sh reactrouter6
+cd build/reactrouter6
+echo "Installing dependencies..."
+npm install --legacy-peer-deps > npm_install.log 2>&1
+npm run sync
+
+echo "Cleaning up port 3000..."
+lsof -ti:3000 | xargs kill -9 || true
+
+echo "Starting server..."
+# Start server in background and save PID
+npm start > server.log 2>&1 &
+SERVER_PID=$!
+
+# Ensure server is killed on script exit
+trap "kill $SERVER_PID" EXIT
+
+echo "Waiting for server to start (30s)..."
+sleep 30
+
+echo "Checking server status..."
+SERVER_RESPONSE=$(curl -s -v http://localhost:3000 2>&1)
+if echo "$SERVER_RESPONSE" | grep -q "Child compilation failed"; then
+  echo "Server started but has compilation errors. Exiting."
+  echo "$SERVER_RESPONSE"
+  exit 1
+fi
+
+if ! echo "$SERVER_RESPONSE" | grep -q "200 OK"; then
+  echo "Server did not return 200 OK. Exiting."
+  echo "$SERVER_RESPONSE"
+  exit 1
+fi
+echo "Server is healthy."
+
+echo "Running Cypress tests..."
+npm run cypress
+
@@ -1,53 +1,55 @@
-import type { Action as HistoryAction, History, Location as HistoryLocation } from 'history';
-import { createHashHistory as createHistory } from 'history';
-import React from 'react';
-import type { BrowserRouterProps } from 'react-router-dom';
-import { Router } from 'react-router-dom';
+/**
+ * `IonReactHashRouter` provides a way to use hash-based routing in Ionic
+ * React applications.
+ */
+
+import type { Action as HistoryAction, Location as HistoryLocation } from 'history';
+import type { PropsWithChildren } from 'react';
+import React, { useEffect, useRef } from 'react';
+import type { HashRouterProps } from 'react-router-dom';
+import { HashRouter, useLocation, useNavigationType } from 'react-router-dom';
 
 import { IonRouter } from './IonRouter';
 
-interface IonReactHashRouterProps extends BrowserRouterProps {
-  history?: History;
-}
+const RouterContent = ({ children }: PropsWithChildren<{}>) => {
+  const location = useLocation();
+  const navigationType = useNavigationType();
 
-export class IonReactHashRouter extends React.Component<IonReactHashRouterProps> {
-  history: History;
-  historyListenHandler?: (location: HistoryLocation, action: HistoryAction) => void;
+  const historyListenHandler = useRef<(location: HistoryLocation, action: HistoryAction) => void>();
 
-  constructor(props: IonReactHashRouterProps) {
-    super(props);
-    const { history, ...rest } = props;
-    this.history = history || createHistory(rest);
-    this.history.listen(this.handleHistoryChange.bind(this));
-    this.registerHistoryListener = this.registerHistoryListener.bind(this);
-  }
+  const registerHistoryListener = (cb: (location: HistoryLocation, action: HistoryAction) => void) => {
+    historyListenHandler.current = cb;
+  };
 
   /**
-   * history@4.x passes separate location and action
-   * params. history@5.x passes location and action
-   * together as a single object.
-   * TODO: If support for React Router <=5 is dropped
-   * this logic is no longer needed. We can just assume
-   * a single object with both location and action.
+   * Processes navigation changes within the application.
+   *
+   * Its purpose is to relay the current `location` and the associated
+   * `action` ('PUSH', 'POP', or 'REPLACE') to any registered listeners,
+   * primarily for `IonRouter` to manage Ionic-specific UI updates and
+   * navigation stack behavior.
+   *
+   * @param location The current browser history location object.
+   * @param action The type of navigation action ('PUSH', 'POP', or
+   * 'REPLACE').
    */
-  handleHistoryChange(location: HistoryLocation, action: HistoryAction) {
-    const locationValue = (location as any).location || location;
-    const actionValue = (location as any).action || action;
-    if (this.historyListenHandler) {
-      this.historyListenHandler(locationValue, actionValue);
+  const handleHistoryChange = (location: HistoryLocation, action: HistoryAction) => {
+    if (historyListenHandler.current) {
+      historyListenHandler.current(location, action);
     }
-  }
-
-  registerHistoryListener(cb: (location: HistoryLocation, action: HistoryAction) => void) {
-    this.historyListenHandler = cb;
-  }
-
-  render() {
-    const { children, ...props } = this.props;
-    return (
-      <Router history={this.history} {...props}>
-        <IonRouter registerHistoryListener={this.registerHistoryListener}>{children}</IonRouter>
-      </Router>
-    );
-  }
-}
+  };
+
+  useEffect(() => {
+    handleHistoryChange(location, navigationType);
+  }, [location, navigationType]);
+
+  return <IonRouter registerHistoryListener={registerHistoryListener}>{children}</IonRouter>;
+};
+
+export const IonReactHashRouter = ({ children, ...routerProps }: PropsWithChildren<HashRouterProps>) => {
+  return (
+    <HashRouter {...routerProps}>
+      <RouterContent>{children}</RouterContent>
+    </HashRouter>
+  );
+};
@@ -1,51 +1,56 @@
-import type { Action as HistoryAction, Location as HistoryLocation, MemoryHistory } from 'history';
-import React from 'react';
+/**
+ * `IonReactMemoryRouter` provides a way to use `react-router` in
+ * environments where a traditional browser history (like `BrowserRouter`)
+ * isn't available or desirable.
+ */
+
+import type { Action as HistoryAction, Location as HistoryLocation } from 'history';
+import type { PropsWithChildren } from 'react';
+import React, { useEffect, useRef } from 'react';
 import type { MemoryRouterProps } from 'react-router';
-import { Router } from 'react-router';
+import { MemoryRouter, useLocation, useNavigationType } from 'react-router';
 
 import { IonRouter } from './IonRouter';
 
-interface IonReactMemoryRouterProps extends MemoryRouterProps {
-  history: MemoryHistory;
-}
+const RouterContent = ({ children }: PropsWithChildren<{}>) => {
+  const location = useLocation();
+  const navigationType = useNavigationType();
 
-export class IonReactMemoryRouter extends React.Component<IonReactMemoryRouterProps> {
-  history: MemoryHistory;
-  historyListenHandler?: (location: HistoryLocation, action: HistoryAction) => void;
+  const historyListenHandler = useRef<(location: HistoryLocation, action: HistoryAction) => void>();
 
-  constructor(props: IonReactMemoryRouterProps) {
-    super(props);
-    this.history = props.history;
-    this.history.listen(this.handleHistoryChange.bind(this));
-    this.registerHistoryListener = this.registerHistoryListener.bind(this);
-  }
+  const registerHistoryListener = (cb: (location: HistoryLocation, action: HistoryAction) => void) => {
+    historyListenHandler.current = cb;
+  };
 
   /**
-   * history@4.x passes separate location and action
-   * params. history@5.x passes location and action
-   * together as a single object.
-   * TODO: If support for React Router <=5 is dropped
-   * this logic is no longer needed. We can just assume
-   * a single object with both location and action.
+   * Processes navigation changes within the application.
+   *
+   * Its purpose is to relay the current `location` and the associated
+   * `action` ('PUSH', 'POP', or 'REPLACE') to any registered listeners,
+   * primarily for `IonRouter` to manage Ionic-specific UI updates and
+   * navigation stack behavior.
+   *
+   * @param location The current browser history location object.
+   * @param action The type of navigation action ('PUSH', 'POP', or
+   * 'REPLACE').
    */
-  handleHistoryChange(location: HistoryLocation, action: HistoryAction) {
-    const locationValue = (location as any).location || location;
-    const actionValue = (location as any).action || action;
-    if (this.historyListenHandler) {
-      this.historyListenHandler(locationValue, actionValue);
+  const handleHistoryChange = (location: HistoryLocation, action: HistoryAction) => {
+    if (historyListenHandler.current) {
+      historyListenHandler.current(location, action);
     }
-  }
-
-  registerHistoryListener(cb: (location: HistoryLocation, action: HistoryAction) => void) {
-    this.historyListenHandler = cb;
-  }
-
-  render() {
-    const { children, ...props } = this.props;
-    return (
-      <Router {...props}>
-        <IonRouter registerHistoryListener={this.registerHistoryListener}>{children}</IonRouter>
-      </Router>
-    );
-  }
-}
+  };
+
+  useEffect(() => {
+    handleHistoryChange(location, navigationType);
+  }, [location, navigationType]);
+
+  return <IonRouter registerHistoryListener={registerHistoryListener}>{children}</IonRouter>;
+};
+
+export const IonReactMemoryRouter = ({ children, ...routerProps }: PropsWithChildren<MemoryRouterProps>) => {
+  return (
+    <MemoryRouter {...routerProps}>
+      <RouterContent>{children}</RouterContent>
+    </MemoryRouter>
+  );
+};