Wrapping the returned function in useCallback prevents a new reference on every render, which was causing an infinite startViewTransition loop on the initial signup page (fresh install with no admin). Fixes #5626
24 lines
678 B
TypeScript
24 lines
678 B
TypeScript
import { useCallback } from "react";
|
|
import { NavigateOptions, useNavigate } from "react-router-dom";
|
|
|
|
const useNavigateTo = () => {
|
|
const navigateTo = useNavigate();
|
|
|
|
const navigateToWithViewTransition = useCallback(
|
|
(to: string, options?: NavigateOptions) => {
|
|
const doc = window.document as unknown as Document & { startViewTransition?: (callback: () => void) => void };
|
|
if (!doc.startViewTransition) {
|
|
navigateTo(to, options);
|
|
} else {
|
|
document.startViewTransition(() => {
|
|
navigateTo(to, options);
|
|
});
|
|
}
|
|
},
|
|
[navigateTo],
|
|
);
|
|
|
|
return navigateToWithViewTransition;
|
|
};
|
|
|
|
export default useNavigateTo;
|