代码之家 › 专栏 › 技术社区 › Nouman Sajjad

未重定向到所需链接

react-router-dom react-router react-hooks reactjs javascript

Nouman Sajjad · 技术社区 · 1 年前

问题是,每当我尝试结账时,如果我没有登录,它就会转到链接 "http://localhost:3000/login?redirect=shipping" 登录,然后转到运输网站,在那里必须输入地址等。

它重定向到 "http://localhost:3000/login/shipping" 但它应该重定向到 "http://localhost:3000/shipping" .

代码是:

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { login } from "../../redux/action/userAction";

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const location = useLocation();
  const navigate = useNavigate();

  const redirect = location.search ? location.search.split("=")[1] : "/";
  console.log(`Login Redirect ${redirect}`); // here it take "shipping" from redirect variable

  const dispatch = useDispatch();
  const userLogin = useSelector((state) => state.userLogin);

  const { loading, error, userInfo } = userLogin;
  // dispatch(login({ email, password }));

  useEffect(() => {
    if (userInfo) {
      navigate(redirect);
    }
  }, [userInfo, redirect]);

  const sumbitHandler = (e) => {
    e.preventDefault();
    dispatch(login(email, password));
  };

  return (
    <div className="flex flex-col justify-center mx-6 my-6">
      <div className="hidden"></div>
      <div className="flex flex-col gap-10">
        {error && (
          <h1 className="text-center bg-red-500 text-red-600 text-sm py-4 w-full">
            {error}
          </h1>
        )}
        <div className="flex flex-col gap-6">
          <h1 className="text-3xl font-medium">Log In to Exclusive</h1>
          <p className="text-sm">Enter your details below</p>
        </div>
        <div className="flex flex-col gap-4">
          <form onSubmit={sumbitHandler} autoComplete="off">
            <div className="flex flex-col gap-6">
              <div>
                <input
                  type="email"
                  placeholder="Enter Email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="text-sm border-b-[1px] border-black/[60%] w-full px-1 py-3"
                  autoComplete="off"
                />
              </div>
              <div>
                <input
                  type="password"
                  placeholder="Password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="text-sm border-b-[1px] border-black/[60%] w-full px-1 py-3"
                  autoComplete="off"
                />
              </div>
              <div className="my-">
                <button
                  className="text-base text-white bg-black py-4 w-full rounded-full"
                  type="submit"
                >
                  Login
                </button>
>               </div>
            </div>
          </form>
          <div>
            <h1 className="text-center text-xs text-black/[60%]">
              Don't have an account?{" "}
              <span className="hover:underline">
                <Link
                  to={redirect ? `/signup?redirect=${redirect}` : "/signup"}
                >
                  SingUp
                </Link>
              </span>
            </h1>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Login;

我试着做手动导航,比如给 "/shipping" 但效果并不好。

1 回复 | 直到 1 年前

Drew Reese 1 年前

您正在“重定向”到 "shipping" 哪个是 相对的 路径,因为它不是以前导开头的 "/" 性格相对路径将得到 附加的 到当前路径,例如,如果当前路径 "/login" 然后 navigate("shipping") 将导航到 "/login/shipping" .

阅读 redirect 搜索param并确保它是一个具有前导的绝对路径 "/" ,例如。 "/shipping" .

const Login = () => {
  ...

  const navigate = useNavigate();
  const [searchParams] = useSearchParams();

  const redirect = `/${searchParams.get("redirect") ?? ""}`; // "/shipping"
  
  ...

  useEffect(() => {
    if (userInfo) {
      navigate(redirect, { replace: true });
    }
  }, [userInfo, redirect]);