Next.js Discord

Discord Forum

Redirect Button not working

Answered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
"use client";

import { redirect } from "next/navigation";
import CustomButton from "./CustomButton";

export default function LoginButton() {
  const loginUser = () => {
    redirect("/profile/login");
  };

  return (
    <div>
      <button
        onClick={loginUser}
      />
    </div>
  );
}


nothing happens when I click it
Answered by riský
"use client";

import { useRouter } from "next/navigation";
import CustomButton from "./CustomButton";

export default function LoginButton() {
  const router = useRouter()
  const loginUser = () => {
    router.push("/profile/login");
  };

  return (
    <div>
      <button
        onClick={loginUser}
      />
    </div>
  );
}
View full answer

10 Replies

riský
Try using useRouter and .push
Sun bearOP
But I cant use Router in a component can I ?
riský
"use client";

import { useRouter } from "next/navigation";
import CustomButton from "./CustomButton";

export default function LoginButton() {
  const router = useRouter()
  const loginUser = () => {
    router.push("/profile/login");
  };

  return (
    <div>
      <button
        onClick={loginUser}
      />
    </div>
  );
}
Answer
Sun bearOP
❤️
Thank you
riský
does it work?
Sun bearOP
yes xD
I dont know but web dev is not my best skill xD
riský
lol they claim that you can use redirect in client component, but i haven't seen it work for anyone...
@riský lol they claim that you can use redirect in client component, but i haven't seen it work for anyone...
riský
[The redirect function allows you to redirect the user to another URL. redirect can be used in Server Components, Client Components, Route Handlers, and Server Actions.](https://nextjs.org/docs/app/api-reference/functions/redirect)