useNavigate 不工作 react-router-dom v6答案

【问题标题】：useNavigate not working react-router-dom v6useNavigate 不工作 react-router-dom v6
【发布时间】：2022-08-23 12:02:14
【问题描述】：

我正在使用 react-router-dom v6 并且我正在访问来自 location 对象的 from 值，它给出了 pathname 但在执行时导航（从，{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);
        });
    }

请澄清“不起作用”是什么意思。它是导航而不是替换吗？还是根本不导航？是否有任何控制台错误或 React 警告？
@DBS 没有导航，也没有警告和错误
您是否尝试过将console.log(from) 之类的内容放在navigate() 上方的行中，以确保此时一切都按预期进行？
我试过了，我得到了路径名
@HareePrasad 我认为来自 URL 的 URL 与当前 URL 相同，这就是它不重定向的原因。

标签： reactjs react-router

【解决方案1】：

修复您的 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();
});

使用布尔表达式检查路由包装器中的 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 状态；您可以在经过身份验证时简单地发出命令式重定向。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我只是简单地使用：

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

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

参考：-React Router v6...

【讨论】：