Retrieve previous route and/or route history in Next router #36723
-
I'm using the In Nowhere do I see any mention of past route retrieval. Is this not offered at all? Or is there still some Next way of doing this, other than explicit global state recording keeping or something? |
Beta Was this translation helpful? Give feedback.
Replies: 7 comments 16 replies
-
I think this is a tricky one... Generally, all routing solutions, use the history API, and that has its ups and downs. You can see in the browser yourself, Routing solutions take care of a bunch of things for you, but the idea of giving access to the history stack is terrifying, because, it is highly mutable (replace for example). That being said, I can think of a couple of approaches: // this would have to go in `_app.tsx` to be a true previous route tracker (across all pages)
const usePreviousRoute = () => {
const { asPath } = useRouter();
const ref = useRef<string | null>(null);
useEffect(() => {
ref.current = asPath;
}, [asPath]);
return ref.current;
};
You can also attach an event listener to I'd also say that At the top of my head, right now, there shouldn't be any issues with this, but perhaps you can find something? or confirm that it does the trick for you? |
Beta Was this translation helpful? Give feedback.
-
If you are looking to achieve the same thing because you want to redirect a user to the previously seen page after successfuul signin the above won't work as the path will be reset when navigating to your SignInController.
Then in the view:
|
Beta Was this translation helpful? Give feedback.
-
for anyone using Zustandimport { useRouter } from "next/router";
import { useEffect, useRef } from "react";
import { create } from "zustand";
interface AsPathStoreType {
prevAsPath: string | undefined;
currentAsPath: string | undefined;
}
const asPathStore = create<AsPathStoreType>((set) => ({
prevAsPath: undefined,
currentAsPath: undefined,
}));
/** use as a hook to get prevAsPath and currentAsPath*/
export const useAsPath = () => {
return asPathStore((state) => state);
};
/** use everywhere you like */
export const getAsPath = () => {
return asPathStore.getState();
};
/** Only use this in _app.tsx or root it's like a Provider */
export const useAsPathInitializer = () => {
const { asPath } = useRouter();
const { currentAsPath } = useAsPath();
useEffect(() => {
if (currentAsPath !== asPath) {
asPathStore.setState((state) => ({
...state,
currentAsPath: asPath,
prevAsPath: currentAsPath,
}));
}
}, [asPath, currentAsPath]);
}; |
Beta Was this translation helpful? Give feedback.
-
You can also use Documentation: https://nextjs.org/docs/pages/api-reference/functions/use-router#routerback |
Beta Was this translation helpful? Give feedback.
-
How do you do it on the latest app router |
Beta Was this translation helpful? Give feedback.
-
If you're using Next.js with the new App Router import { create } from 'zustand';
import { useEffect } from 'react';
import { usePathname } from 'next/navigation';
interface AsPathStoreType {
prevAsPath: string | undefined;
currentAsPath: string | undefined;
}
const asPathStore = create<AsPathStoreType>((set) => ({
prevAsPath: undefined,
currentAsPath: undefined,
}));
/** Hook to get prevAsPath and currentAsPath */
export const useAsPath = () => asPathStore((state) => state);
/** Utility function to get paths outside components */
export const getAsPath = () => asPathStore.getState();
/** Path initializer for App Router, should be used in root (e.g., layout.tsx or page.tsx) */
export const useAsPathInitializer = () => {
const pathname = usePathname();
const { currentAsPath } = useAsPath();
useEffect(() => {
if (currentAsPath !== pathname) {
asPathStore.setState((state) => ({
prevAsPath: state.currentAsPath,
currentAsPath: pathname,
}));
}
}, [pathname, currentAsPath]);
}; |
Beta Was this translation helpful? Give feedback.
-
The cleanest solution for me was using
|
Beta Was this translation helpful? Give feedback.
I think this is a tricky one...
Generally, all routing solutions, use the history API, and that has its ups and downs. You can see in the browser yourself,
window.history
prints a few properties.Routing solutions take care of a bunch of things for you, but the idea of giving access to the history stack is terrifying, because, it is highly mutable (replace for example).
That being said, I can think of a couple of approaches: