javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react-router): add useCallback to HashRouter and MemoryRouter for consistency with BrowserRouter

Browse Source
This commit is contained in:
ShaneK
2026-03-11 09:36:20 -07:00
parent 5016e33628
commit 0b1af4fdcb
2 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/react-router/src/ReactRouter/IonReactHashRouter.tsx
View File

@@ -5,7 +5,7 @@
import type { Action as HistoryAction, Location as HistoryLocation } from 'history';
import type { PropsWithChildren } from 'react';
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef, useCallback } from 'react';
import type { HashRouterProps } from 'react-router-dom';
import { HashRouter, useLocation, useNavigationType } from 'react-router-dom';
@@ -17,9 +17,9 @@ const RouterContent = ({ children }: PropsWithChildren<{}>) => {
const historyListenHandler = useRef<(location: HistoryLocation, action: HistoryAction) => void>();
const registerHistoryListener = (cb: (location: HistoryLocation, action: HistoryAction) => void) => {
const registerHistoryListener = useCallback((cb: (location: HistoryLocation, action: HistoryAction) => void) => {
historyListenHandler.current = cb;
};
}, []);
/**
* Processes navigation changes within the application.
@@ -33,15 +33,15 @@ const RouterContent = ({ children }: PropsWithChildren<{}>) => {
* @param action The type of navigation action ('PUSH', 'POP', or
* 'REPLACE').
*/
const handleHistoryChange = (location: HistoryLocation, action: HistoryAction) => {
const handleHistoryChange = useCallback((loc: HistoryLocation, act: HistoryAction) => {
if (historyListenHandler.current) {
historyListenHandler.current(location, action);
historyListenHandler.current(loc, act);
}
};
}, []);
useEffect(() => {
handleHistoryChange(location, navigationType);
}, [location, navigationType]);
}, [location, navigationType, handleHistoryChange]);
return <IonRouter registerHistoryListener={registerHistoryListener}>{children}</IonRouter>;
};

14
packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx
View File

@@ -6,7 +6,7 @@
import type { Action as HistoryAction, Location as HistoryLocation } from 'history';
import type { PropsWithChildren } from 'react';
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef, useCallback } from 'react';
import type { MemoryRouterProps } from 'react-router';
import { MemoryRouter, useLocation, useNavigationType } from 'react-router';
@@ -18,9 +18,9 @@ const RouterContent = ({ children }: PropsWithChildren<{}>) => {
const historyListenHandler = useRef<(location: HistoryLocation, action: HistoryAction) => void>();
const registerHistoryListener = (cb: (location: HistoryLocation, action: HistoryAction) => void) => {
const registerHistoryListener = useCallback((cb: (location: HistoryLocation, action: HistoryAction) => void) => {
historyListenHandler.current = cb;
};
}, []);
/**
* Processes navigation changes within the application.
@@ -34,15 +34,15 @@ const RouterContent = ({ children }: PropsWithChildren<{}>) => {
* @param action The type of navigation action ('PUSH', 'POP', or
* 'REPLACE').
*/
const handleHistoryChange = (location: HistoryLocation, action: HistoryAction) => {
const handleHistoryChange = useCallback((loc: HistoryLocation, act: HistoryAction) => {
if (historyListenHandler.current) {
historyListenHandler.current(location, action);
historyListenHandler.current(loc, act);
}
};
}, []);
useEffect(() => {
handleHistoryChange(location, navigationType);
}, [location, navigationType]);
}, [location, navigationType, handleHistoryChange]);
return <IonRouter registerHistoryListener={registerHistoryListener}>{children}</IonRouter>;
};