Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Redirect to another page in React in 3 seconds, not working

export default function Home() {
    const [redirect, setRedirect] = useState<boolean>(false);
    const [redirecting, setRedirecting] = useState<boolean>(false);

    const userContext = useContext(UserContext);

    useEffect(() => {
        const value: string | null = localStorage.getItem("user");
        if (!value) {
            return setRedirecting(true);
        }
        const user: User = JSON.parse(value ?? "");

        if (userContext) {
            userContext.setUser({
                ...user,
            });
        }
    }, [userContext]);

    useEffect(() => {
        if (redirecting) {
            setTimeout(() => {
                console.log("here 1")
                setRedirect(true)
            }, 3000);
        }
    }, [redirecting]);

    if (redirecting || !userContext?.user) {
        return (
            <Container sx={{ my: 2 }}>
                <Typography variant="h5">
                    You need to register to access this page.
                </Typography>
            </Container>
        );
    }
    if (redirect) {
        console.log("here 2");
        return <Navigate to={ "/register"} />
    }

    return (
        <div>Home Content</div>
    );
}

The value of redirect does get changed, but somehow the code responsible to navigate is not executing.

Tags:

2

Answers


  1. 0

    When you set redirect to true the redirecting is still true, therefore the first condition is true and the first return is the one executing.

    You should change the logic of the return

    return (
  <>
    {redirect && <Navigate to={"/register"} />}
    <Container sx={{ my: 2 }}>
      <Typography variant="h5">
        You need to register to access this page.
      </Typography>
    </Container>
  </>
);
    Login or Signup to reply.
  2. 0

    first of all simplify your code, also use react best practices. it will help you to debug code easily. something like below.

    import { useNavigate } from "react-router-dom";

export default function Home() {


  const navigate = useNavigate();
  const userContext = useContext(UserContext);

  useEffect(() => {
    const value: string | null = localStorage.getItem("user");
    if (!value) {
      navigate("/register");
    } else {

      const user: User = JSON.parse(value ?? "");

      if (userContext) {
        userContext.setUser({
          ...user,
        });
      }
    }
  }, [userContext]);


  return (
    <React.Fragment>
      {
        !userContext?.user
          ? <Container sx={{ my: 2 }}>
            <Typography variant="h5">
              You need to register to access this page.
            </Typography>
          </Container>
          : <div>Home Content</div>
      }
    </React.Fragment>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search