useNavigate 不工作 react-router-dom v6

Question

我正在使用 react-router-dom v6，并且正在从location object 访问from值，它提供了pathname ，但是在执行navigate(from,{replace:true})时它不起作用。

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

Answer 1

我认为问题出在“/”上，将其从 URL 中删除并尝试。

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

Answer 2

修复 CSB 后，我看到重定向工作。 问题是App中的auth值没有改变，因为您的登录流程没有设置存储在 localStorage 中的logged_in_status值。 结果是用户被弹回"/signin"路由。

您还应该序列化/反序列化您保存/访问/来自 localStorage 的数据。

应用程序

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

使用 boolean 表达式检查路由包装器中的auth值。

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

登入

在这里，您只需在成功验证后将true的"logged_in_status"设置为 localStorage。 我也没有真正需要设置done的 state; 您可以在经过身份验证时简单地发出命令式重定向。

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

Answer 3

我只是简单地使用：

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

所以，我在路由和replace: true之前添加了../ 。

参考：- React Router v6...