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

Reactjs – How to do redirect to another page in inside the function by "react-router-dom": "^6.21.1"?

I have an issue with redirect to another page. I can’t use useNavigate() inside the function. Because it’s not an component. redirect also not working. How can i redirect?

import { redirect, useNavigate } from "react-router-dom";
import { ILogin } from "../Pages/Login/ILogin";
import { decode } from "./encodeDecode";

export const parseToken = () => {
  const nav = useNavigate();
  try {
    const token: ILogin = decode(localStorage.getItem("token"));
    return token;
  } catch (error) {
    console.log(error);
    alert("Invalid Credentials");
    localStorage.clear();
    redirect("/login");
    nav("/login");
  }
};

when call redirect it’s not working
when call nav it’s throw an error as

  Line 6:15:  React Hook "useNavigate" is called in function "parseToken" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

webpack compiled with 1 error and 1 warning

I need a solution for redirecting in function.

Tags:

5

Answers


  1. 0

    The redirect function is not part of the standard React Router API and seems to be a misunderstanding or a mix-up with the useNavigate hook or the Navigate component.

    Login or Signup to reply.
  2. 0

    change component name from parseToken to ParseToken

    and use like <ParseToken/>

    Login or Signup to reply.
  3. 0

    The error you’re seeing regarding useNavigate is pretty self explanatory – you cannot call a hook in a function that’s neither a React function (starts with a capital latter) or a custom hook (starts with use). Check out Rules of Hooks page in the React docs.

    As for the redirect function, it should be used in a loader. Make sure you’ve set up your router as a with createBrowserRouter to be able to use data API’s.

    Login or Signup to reply.
  4. 0

    try to return redirect("/login"); like THIS
    or return <Navigate to="/login"/>

    Login or Signup to reply.
  5. 0

    You are mixing a bunch of concepts. The first is that redirect() and useNavigate() are two different things: redirect() is just an utility that returns a Response to be used to redirect inside loaders and actions. useNavigate() is an hook that allows you to programmatically navigate from a component.

    Since useNavigate() is an hook, it follows the hooks rules, meaning that it cannot be called inside a function, but nothing stops you to pass the nav function as a parameter of parseToken():

    
const parseToken = (navigate: NavigateFunction) => {
  try {
    const token: ILogin = decode(localStorage.getItem("token"));
    return token;
  } catch (error) {
    console.log(error);
    alert("Invalid Credentials");
    localStorage.clear();
    navigate("/login");
  }
};

export function MyComponent() {
  const navigate = useNavigate();

  React.useEffect(() => {
    ...
    parseToken(navigate);
    ...
  }, [...])

  return <div>{...}</div>
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search