Next.js Discord

Discord Forum

router.push does not appear to work

Answered
Hierran Wolfdog posted this in #help-forum
Open in Discord
Hierran WolfdogOP
I'm working on a personal project, and attempting to redirect the user once the login action is completed, using the following code:
if (data && data.success) {
            setUser(data.data);
            router.push("/");
        }


but for whatever reason, it does not work. When I use router.push in useEffect, it works perfectly fine, but here it does not appear to redirect the user. How do I fix this?
Answered by Hierran Wolfdog
Okay, I have just solved the issue. Turns out, this was an issue with my own backend API logic - the above code mentioned works absolutely fine, so I'm marking as resolved.
View full answer

87 Replies

Hierran WolfdogOP
Any help?
@Hierran Wolfdog Any help?
Yellowstripe scad
do you mount it using const router = useRouter()?
I have tried with useRouter and just using the raw router by itself
Yellowstripe scad
are you trying to use it in a client or server component
Hierran WolfdogOP
Client component
Yellowstripe scad
show me your import
Hierran WolfdogOP
This is what I'm using atm 
import router from "next/router";
however I have also tried { useRouter } etc etc as stated previously
Neither work
Yellowstripe scad
ok so
you have to use
import { useRouter } from "next/navigation"
lmk if that works
Hierran WolfdogOP
That doesn't work either unfortunately
I tried that one because I did Google this before coming here
Yellowstripe scad
can you share your entire code
for that component
/page
Hierran WolfdogOP
Yeah sure, give me one sec
Yellowstripe scad
just a screenshot is good
Hierran WolfdogOP
@Yellowstripe scad This is what I'm comfortable sharing from this page. The only place that login gets called is on form submit/button press. That part works fine, just the redirect doesn't for whatever reason
The page is located at /login
Yellowstripe scad
are there any errors?
Hierran WolfdogOP
Nope
Let me double check actually
But I don't think so
Yellowstripe scad
dev toolsconsole?
Hierran WolfdogOP
Nope. No errors
Yellowstripe scad
ok try
wait is your code kinda structured like this
function page() {

picture

return (...)
}
Hierran WolfdogOP
Yep
Yellowstripe scad
ok so first at the top make sure to include "use client" if you don't already
and add import { useRouter } from "next/navigation if you haven't already
then at the top right below where you define the function (function Page() {
so basically the top of the function or page put const router = useRouter()
then lmk if that works
hope thats clear
Hierran WolfdogOP
When I add "use client;" do I need to restart the dev environment?
Yellowstripe scad
its just "use client" (without the ;) and im actually not sure, but I would lol
Hierran WolfdogOP
I have just tried that, and nothing sadly
This is really puzzling
With next/navigation and useRouter
I did read that next/navigation is more if you're using the app router or whatever. I'll try with next/router again.. maybe "use client" fixes it for that use case
Yellowstripe scad
whats the useeffect for
@Yellowstripe scad whats the useeffect for
Hierran WolfdogOP
Just to redirect the user to the homepage if the user is already logged in. Strangely, this functionality works.
If I reload the page after clicking login, the user gets redirected as expected
Yellowstripe scad
ok I have an idea
Hierran WolfdogOP
?
Yellowstripe scad
add a console.log in the if statement just to make sure
@Yellowstripe scad oh are u not using it
Hierran WolfdogOP
I used it as you suggested, but that didn't work
@Hierran Wolfdog I used it as you suggested, but that didn't work
Yellowstripe scad
are you using the app directory
@Yellowstripe scad are you using the app directory
Hierran WolfdogOP
Nope
Yellowstripe scad
that might be why but im not sure, I only have experience with that lmao
so sorry if my solutions dont work
Hierran WolfdogOP
The console.log statement is being triggered
I mean as a workaround I've been using window.location.href but I know that's an antipattern of sorts which is why I want to try and fix it if I can
Yellowstripe scad
idk if people approve but you might just be able to try redirect("pagewhatever")
next/navigation
Hierran WolfdogOP
router.redirect?
Yellowstripe scad
no
just
redirect("page")
import { redirect } from 'next/navigation'
Hierran WolfdogOP
Welp
I don't think nextjs approved
Yellowstripe scad
lol
idk if I can help much further
sorry
just wanted to make an effort cause nobody helps me!
Hierran WolfdogOP
It's all good man
Yellowstripe scad
Hierran WolfdogOP
I appreciate it
Yeah that's why I bumped it
I saw other people helping and I was like dude wtf
Yellowstripe scad
those are all from today
Hierran WolfdogOP
Yikes :/
Yellowstripe scad
nextauth makes me wanna quit
LOL
Original message was deleted
Hierran WolfdogOP
Just tried that. Did not work
It appears to be re-rendering the login page
When I click login
So it's doing something but just not rendering the correct page..?
@Yellowstripe scad LOL
Hierran WolfdogOP
Fair enough
@Hierran Wolfdog It appears to be re-rendering the `login` page
Hierran WolfdogOP
Confirmed. I just put a console.log statement in useEffect to tell when the component gets rendered, and, well..
The last two are after clicking login
Hang on, unless I try router.push(BASE_URI + "/")
Hierran WolfdogOP
Okay, I have just solved the issue. Turns out, this was an issue with my own backend API logic - the above code mentioned works absolutely fine, so I'm marking as resolved.
Answer