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