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, Jan 27 '22 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, Jan 27 '22 at 11:03
@HareePrasad I think from URL is the same as the current URL, that's why it's not redirecting. — Rahul Sharma, Jan 27 '22 at 11:17
@RahulSharma nope it is different, from url is '/cart' and the current url is '/signin' after login i'm navigating to cart page or if it doesn't have pathname it will navigate to home page. — Haree Prasad, Jan 27 '22 at 11:29
@RahulSharma https://codesandbox.io/s/epic-wood-pdjqs?file=/src/Signinin.js — Haree Prasad, Jan 27 '22 at 12:00
Your codesandbox appears to be incomplete. Please update it so it runs and also provide a set of reproduction steps necessary to reproduce the issue in it. — Drew Reese, Jan 27 '22 at 16:22

score 1 · Answer 1 · answered Jan 27 '22 at 11:37

1

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

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

answered Jan 27 '22 at 11:37

Rahul Sharma

9,534
1
15
37

score 1 · Accepted Answer · answered Jan 27 '22 at 16:40

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);
      });
  }
};

score 0 · Answer 3 · answered Aug 23 '22 at 04:02

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...

score 0 · Answer 4 · answered Feb 26 '23 at 11:52

0

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 '23 at 11:52

UdevApp

31
5

thats because the correct usage is – MichaelTaylor3D Jun 09 '23 at 00:37

useNavigate not working react-router-dom v6

4 Answers4