Is it possible to have a back button after at least one Link click?
Answered
Aplomado Falcon posted this in #help-forum
Aplomado FalconOP
I would like a back button to appear when a user navigates to a different page (using next/link). To me it sounds like it should be possible to know whether a user has navigated to a different page (using next/link). The (app) router object from useRouter allows you to use the back function, but doesn't have a method to know whether back is usable as far as I see. Would it be possible to implement something like this?
Answered by not-milo.tsx
Then yeah, combining
Store in context state (or a state management library of your choice) an array of the paths the user visited and use them to render a button that leverages
usePathname, useSearchParams and the React Context api you should be able to do it.Store in context state (or a state management library of your choice) an array of the paths the user visited and use them to render a button that leverages
router.back() to return to the previous page until it reaches the path at the beginning pf the array.16 Replies
There's nothing readily available that has that kind of functionality. You can combine the [router events](https://nextjs.org/docs/app/api-reference/functions/use-router#router-events) example given in the docs with custom logic that saves in state the previous pathname and renders a back button if it's defined.
Aplomado FalconOP
Thanks for the response
I think I need at least something like state management, because it's not reliable enough for normal components and useState or the router events to be certain enough that you can go back or not
You'd think it's quite easy for the router itself to know 🤔 Each time it pushes it can go back one more time. Although edge cases might be hard/impossible to handle
Arboreal ant
Is this an xy problem? It sounds like you want to not be able to go back to certain pages (because they aren't valid if you go straight back)? Am I correct in that assumption?
I.e.
User navigates to /a
user does something on /a
user navigates to /a/temp
user does something
User navigates to /b
When the user is on /b you don't want them to go back to /a/temp?
I.e.
User navigates to /a
user does something on /a
user navigates to /a/temp
user does something
User navigates to /b
When the user is on /b you don't want them to go back to /a/temp?
Aplomado FalconOP
Ideally I want to have a "copy" of the browser back button on my website that doesn't go "back" to other websites if they were in the browser history.
So from the point the user navigates to my website, it should count as a new starting point (no back-button), building a new history that can be returned to.
So from the point the user navigates to my website, it should count as a new starting point (no back-button), building a new history that can be returned to.
Then yeah, combining
Store in context state (or a state management library of your choice) an array of the paths the user visited and use them to render a button that leverages
usePathname, useSearchParams and the React Context api you should be able to do it.Store in context state (or a state management library of your choice) an array of the paths the user visited and use them to render a button that leverages
router.back() to return to the previous page until it reaches the path at the beginning pf the array.Answer
Aplomado FalconOP
Thanks, I'm going to try this when I have some time and will update on the results
Aplomado FalconOP
I got it working now I think, so that is great. Only I'm not sure why I would use usePathname and useSearchParams and not just use window.location.pathname and window.location.search as it is a client functionality anyway
Cause changes in window.location during client side navigations don't trigger a page reload and so don't re-run effects in components that did not change. If you want to keep track of updates in history either listen to the window
popstate event or use usePathname and useSearchParams.Next.js under the hood is leveraging the History api to manage cleint side navigations and updates to pathname and search params.
Here's my implementation of what you wanted to do:
https://github.com/milovangudelj/history
https://history.milovangudelj.com
Important files are:
https://github.com/milovangudelj/history
https://history.milovangudelj.com
Important files are:
./components/router-events.tsx, ./components/navigation-controls.tsx and ./lib/store.ts.Aplomado FalconOP
thanks! Yes you're right!
Aplomado FalconOP
Really appreciate that you built an example! Going to check it out
Sloth bear
Hello, I have a question about something similar. I want to intercept the browser's back button on a specific page. When the user is on that page and clicks the browser's back button, instead of going back to the previous page, they are redirected to another link.
I've tried something like:
But the browser back button click is never trigged on client server mode... How cha I go around that?
I've tried something like:
useEffect(()=>{
window.onpopstate = function(){
... code;
}
});But the browser back button click is never trigged on client server mode... How cha I go around that?
@Sloth bear Hello, I have a question about something similar. I want to intercept the browser's back button on a specific page. When the user is on that page and clicks the browser's back button, instead of going back to the previous page, they are redirected to another link.
I've tried something like:
useEffect(()=>{
window.onpopstate = function(){
... code;
}
});
But the browser back button click is never trigged on client server mode... How cha I go around that?
Please open a new thread since your issue is not strictly related to this one.