NextJS router with go back button
Unanswered
Cape horse mackerel posted this in #help-forum
Cape horse mackerelOP
I have a requirement to return the user back to the previous page.
However, things getting complicated if we add authentication process there.
So, let's say I have an app where I can see details about the product, route for that is
- when I share a
- the second use case is, when I share that link to the user which is not logged in, firstly, my app will see that he is not logged in and will redirect him to the login page, after he's logged in, my app will redirect him to
Any idea how to solve this, is it even possible?
However, things getting complicated if we add authentication process there.
So, let's say I have an app where I can see details about the product, route for that is
mydomain.com/products/:productId, and I have a go back button within that page, so the use cases are:- when I share a
mydomain.com/product/:productId link to another user and when he lands on that page and wants to click a back button I should redirect him to myapp.domain.com/products- the second use case is, when I share that link to the user which is not logged in, firstly, my app will see that he is not logged in and will redirect him to the login page, after he's logged in, my app will redirect him to
mydomain.com/products/:productId, however, when he clicks go back button, the app will return him to the login page, and I want to return him to myapp.domain.com/products.Any idea how to solve this, is it even possible?
// first use case can be done like this (I think so)
const handleGoBack = () => {
window.history.length <= 2 ? router.push("/products") : router.back();
}11 Replies
From your requirements it looks like you could just use
router.push() in both cases. If the user is logged in and clicks on the button it will redirect him to the products page, and the same thing would happen if it has to log in first.You don't have to use
router.back() at all costs. That's a programmatic way of telling the browser to go to the previous url visited, which might not be on your page.Cape horse mackerelOP
I'm using next auth and I'm not in a control of sign in page and therefore I can do nothing with
router.pushWorkflow is
- the user opens a link to the product
- if it's not logged in we'll redirect him to the login page
- after he logs in, the app returns him back where he was, so on the product detail page
- when he clicks back button within the app, the app will return him to sign in page
- the user opens a link to the product
- if it's not logged in we'll redirect him to the login page
- after he logs in, the app returns him back where he was, so on the product detail page
- when he clicks back button within the app, the app will return him to sign in page
@Cape horse mackerel I'm using next auth and I'm not in a control of sign in page and therefore I can do nothing with `router.push`
Huh? Yes you can. When the user lands on a product page you have control over what's being rendered there. So you can render a link to the products page disguised as a back button and voilà , problem solved.
Cape horse mackerelOP
I think that you didn't quite understand me or the problem but nevermind, that button doesn't make any sense to be there IMO
they can use browser's go back and also navigation is always sticky so they can click whatever they want
they can use browser's go back and also navigation is always sticky so they can click whatever they want
Mh, I think youre mixing up concepts. The browser back button returns to the previous url stored in history, while what you want is a way for the user to return to the products page from a product details page. Or at least that's what you explained so far.
Cape horse mackerelOP
so my back button is behaving like browser's back button
if you're a user and you're searching for a product with some params
if you're a user and you're searching for a product with some params
products/:productId?page=1&perPage=20 and go to the first product in list to see the details. When you click back button it will return you to products/:productId?page=1&perPage=20that's fine, but if I share a link to another user, he doesn't have any url history and therefore I can only return him to the
/products page and obviously can't use router.back() because it will open a blank tabOooh, that's a whole another story.
I'm building an example of history storage for another person that had the same question as you, so I'll share it here as soon as it's ready (not more than a couple of days I think).
The gist of it is that you can combine
I'm building an example of history storage for another person that had the same question as you, so I'll share it here as soon as it's ready (not more than a couple of days I think).
The gist of it is that you can combine
usePathname, UseSearchParams and React context (or a state management library) to store the links visited by your users and navigate backwards that way.Here's my implementation of what you wanted to do:
https://github.com/milovangudelj/history
https://history.milovangudelj.com
In your case you would have to modify the
Important files are:
https://github.com/milovangudelj/history
https://history.milovangudelj.com
In your case you would have to modify the
visited store action to ignore paths that are part of the authentication process (anything managed by next-auth).Important files are:
./components/router-events.tsx, ./components/navigation-controls.tsx and ./lib/store.ts.