useNavigate not working react-router-dom v6

Question

I'm using react-router-dom v6 and I'm accessing the from value from the location object and it gives the pathname but when executing navigate(from,{replace:true}) it does not work.

const navigate = useNavigate();
const { state } = useLocation();
const from = state ? state.from.pathname : '/';
const [isDone, setIsDone] = useState(false);

  useEffect(() => {
    if (isDone) {
      navigate(from, { replace: true }); //not working
    }
  }, [isDone]);

const Submit = async (e) => {
    e.preventDefault();
    let data = { email, password };

    if (!email || !password) {
      setMessage('Please Enter All Fields');
    } else {
      setLoading(true);
      return await axios
        .post('/signin', data)
        .then((res) => {
          if (res.data.message === 'Invalid Credentials') {
            setMessage('Invalid Credentials');
          }
          if (res.data.message === 'Logged In') {
            setIsDone(true);
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          setLoading(false);
        });
    }

Please clarify what "does not work" means. Is it navigating but not replacing? Or not navigating at all? Are there any console errors or React warnings? — DBS
– DBS, Commented Jan 27, 2022 at 10:56
Have you tried putting something like console.log(from) on the line above your navigate() to make sure everything's as-expected at that point? — DBS
– DBS, Commented Jan 27, 2022 at 11:03
@HareePrasad I think from URL is the same as the current URL, that's why it's not redirecting. — Rahul Sharma
– Rahul Sharma, Commented Jan 27, 2022 at 11:17

Drew Reese · Accepted Answer · 2022-01-27 16:40:56Z

After fixing your CSB I see the redirect working. The issue is that the auth value in App doesn't change because your login flow doesn't set the logged_in_status value stored in localStorage. The result is that the user is bounced right back to the "/signin" route.

You should also be serializing/deserializing the data you save/access to/from localStorage.

App

const auth = JSON.parse(localStorage.getItem('logged_in_status'));

...

useEffect(() => {
  const checkAuthStatus = async () => {
    return await axios.get("/loginstatus").then((res) => {
      if (res.data.message === "No Token") {
        localStorage.setItem("logged_in_status", JSON.stringify(false));
      }
      if (res.data.message === "Invalid Token") {
        localStorage.setItem("logged_in_status", JSON.stringify(false));
      }
      if (res.data.message === "Valid Token") {
        localStorage.setItem("logged_in_status", JSON.stringify(true));
      }
    });
  };
  checkAuthStatus();
});

Use a boolean expression for checking the auth value in your route wrappers.

const PublicRoute = () => {
  if (auth) {
    return <Navigate to="/" replace={true} state={{ from: location }} />;
  }
  return <Outlet />;
};

const PrivateRoute = () => {
  if (!auth) {
    return (
      <Navigate to="/signin" replace={true} state={{ from: location }} />
    );
  }

  return <Outlet />;
};

Signin

Here you just need to set a true "logged_in_status" into localStorage upon successful authentication. There's also no real need I see for setting the done state; you can simply issue the imperative redirect when authenticated.

const Submit = async (e) => {
  e.preventDefault();
  let data = { email, password };

  if (!email || !password) {
    setMessage("Please Enter All Fields");
  } else {
    setLoading(true);
    return await axios
      .post("/signin", data)
      .then((res) => {
        if (res.data.message === "Invalid Credentials") {
          setMessage("Invalid Credentials");
        }
        if (res.data.message === "Logged In") {
          localStorage.setItem("logged_in_status", JSON.stringify(true)); // <-- set localStorage
          navigate(from, { replace: true }); // <-- redirect
        }
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }
};

Rahul Sharma · Accepted Answer · 2022-01-27 11:37:01Z

1

I think the issue is with '/', remove it from the URL and try.

navigate(from.replace('/', '') , { replace: true });

answered Jan 27, 2022 at 11:37

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

Comments

Deepak Singh · Accepted Answer · 2022-08-23 04:02:14Z

0

I just simply use:

import { useNavigate } from 'react-router-dom';
...
const navigate = useNavigate();
...
<Button onClick={() => navigate('../login', { replace: true })}>LogOut</Button>

So, I added ../ before the route and the replace: true.

Reference:- React Router v6...

answered Aug 23, 2022 at 4:02

Deepak Singh

1,1879 silver badges18 bronze badges

Comments

Dhia Djobbi · Accepted Answer · 2024-04-03 09:55:35Z

0

Use this instead

return <Navigate to={from} replace />

edited Apr 3, 2024 at 9:55

Dhia Djobbi

1,2922 gold badges21 silver badges38 bronze badges

answered Mar 28, 2024 at 18:44

tasin000

13 bronze badges

Comments

UdevApp · Accepted Answer · 2023-02-26 11:52:12Z

-1

in my case navigate is not work in Link tag

<Link onClick={()=>{navigate("/login")}}>
  <i className="fa fa-user-o  login-icon" aria-hidden="true"></i>
</Link>

this is work for me.

<span onClick={()=>{navigate("/login")}}>
  <i className="fa fa-user-o  login-icon" aria-hidden="true"></i>
</span>

answered Feb 26, 2023 at 11:52

UdevApp

275 bronze badges

2 Comments

MichaelTaylor3D Over a year ago

thats because the correct usage is <Link to="/login">

UdevApp Over a year ago

Thank you about checking my mistake. @MichaelTaylor3D

Collectives™ on Stack Overflow

useNavigate not working react-router-dom v6

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related