JAGDEEP BISHT
JAGDEEP BISHT's Blog

JAGDEEP BISHT's Blog

React router v6 useNavigate function is not working

Photo by Maximilian Weisbecker on Unsplash

React router v6 useNavigate function is not working

JAGDEEP BISHT's photo
JAGDEEP BISHT
·Apr 6, 2022·

2 min read

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
}
 
Share this