useNavigate function not working

React router v6 useNavigate function is not working

React router v6 useNavigate function is not working


If you have recently started using the useNavigate hook from react-router v6, you might run into the following scenario. Say write the code as follows:

import { createContext, useContext } from "react";
import { useNavigate } from "react-router-dom";

export const AuthContext = createContext(null);

export const useAuth = () => {
  const navigate = useNavigate();
  const context = useContext(AuthContext);

  if (!context.authData) {
    navigate("/", { replace: true });
  }

  return context;
};

But your code would call navigate() function but would not navigate to the said location. Its because of the following condition in place in react-router library.

Full code here: https://raw.githubusercontent.com/.../react-router/index.tsx

let activeRef = React.useRef(false);
  React.useEffect(() => {
    activeRef.current = true;
  });

  let navigate: NavigateFunction = React.useCallback(
    (to: To | number, options: NavigateOptions = {}) => {
      warning(
        activeRef.current,
        `You should call navigate() in a React.useEffect(), not when ` +
          `your component is first rendered.`
      );

      if (!activeRef.current) return;

    ...

This sets the activeRef.current using useEffect. So, you would have to call navigate in useEffect as well. So, your code would become as follows:

import { createContext, useContext, useEffect } from "react";
import { useNavigate } from "react-router-dom";

export const AuthContext = createContext(null);

export const useAuth = () => {
  const navigate = useNavigate();
  const context = useContext(AuthContext);

  useEffect(() => {
    if (!context.authData) {
      navigate("/", { replace: true });
    }
  }, []);

  return context;
};