Почему navigate срабатывает в родительском компоненте, но не в дочернем?

Question

[Михаил]

1. Хук useRedirectToInitialPage для редиректа на исходную страницу

import React                        from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import useStoreSelector             from 'hooks/store/useStoreSelector'

function useRedirectToInitialPage(): void {

  const userState = useStoreSelector((store) => store.userState)
  const location  = useLocation()
  const navigate  = useNavigate()

  React.useEffect(() => {
    if (userState.isAuthorized && location.state?.from) {
      navigate(location.state?.from)
    }
  }, [userState.isAuthorized]) // eslint-disable-line react-hooks/exhaustive-deps

}

export default useRedirectToInitialPage

2. Компонент App

import React                    from 'react'
import Layout                   from 'components/layout/Layout/Layout'
import AuthManager              from 'utils/components/managers/AuthManager'
import PageManager              from 'utils/components/managers/PageManager'
import useRedirectToInitialPage from 'hooks/auth/useRedirectToInitialPage'

const App: React.FunctionComponent = () => {

  useRedirectToInitialPage()

  return (
    <Layout>
      <AuthManager />
      <PageManager />
    </Layout>
  )

}

export default App

3. Компонент AuthManager

import React                    from 'react'
import Loader                   from 'components/common/feedback/Loader/Loader'
import Window                   from 'components/common/feedback/Window/Window'
import useSubscribeToAuthChange from 'hooks/auth/useSubscribeToAuthChange'
// import useRedirectToInitialPage from 'hooks/auth/useRedirectToInitialPage'

const AuthManager: React.FunctionComponent = () => {

  const subscribing = useSubscribeToAuthChange()

  // useRedirectToInitialPage()

  return (
    <>
      <Loader 
        visible={subscribing.isLoading}
        details="Инициализация"
      />
      <Window
        visible={subscribing.isError}
        variant="message"
        heading="Ошибка"
        details={subscribing.error?.message ?? ''}
        onClose={subscribing.reset}
      />
    </>
  )

}

export default AuthManager

Компонент Layout никак не взаимодействует с redux и просто формирует несколько вложенных div-элементов.

Я не понимаю почему если я использую хук useRedirectToInitialPage внутри компонента AuthManager, функция navigate не срабатывает, хотя userState.isAuthorized равен true и location.state?.from равен исходному адресу.

Comments

[Михаил]

Все что я успел понять за столь недолгой время - дело скорее всего в самом компоненте AuthManager, а точнее в хуке useSubscribeToAuthChange

useSubscribeToAuthChange

import React                                 from 'react'
import { User, getAuth, onAuthStateChanged } from 'firebase/auth'
import useStoreDispatch                      from 'hooks/store/useStoreDispatch'
import useStoreSelector                      from 'hooks/store/useStoreSelector'
import { firebaseApp }                       from 'utils/configs/FirebaseConfig'
import { userActions }                       from 'store/slices/UserSlice'

type UseSubscribeToAuthChangeReturn = {
  isLoading: boolean
  isSuccess: boolean
  isError:   boolean
  error:     Error | null
  reset:     () => void
}

function useSubscribeToAuthChange(): UseSubscribeToAuthChangeReturn {

  const userState = useStoreSelector((store) => store.userState)
  const dispatch  = useStoreDispatch()

  const [ isLoading, setIsLoading ] = React.useState<boolean>(true)
  const [ isSuccess, setIsSuccess ] = React.useState<boolean>(false)
  const [ isError, setIsError ]     = React.useState<boolean>(false)
  const [ error, setError ]         = React.useState<Error | null>(null)

  const firebaseAuth = getAuth(firebaseApp)

  function reset(): void {
    setIsLoading(true)
    setIsSuccess(false)
    setIsError(false)
    setError(null)
  }

  function authChangeHandler(user: User | null): void {
    if (user) {
      dispatch(userActions.signIn({
        uid:         user.uid,
        email:       user.email,
        displayName: user.displayName,
        phoneNumber: user.phoneNumber,
        photoURL:    user.photoURL,
        providerId:  user.providerId
      }))
    }

    if (!user && userState.isAuthorized) {
      dispatch(userActions.signOut())
    }

    setIsLoading(false)
    setIsSuccess(true)
  }

  function authErrorHandler(error: Error): void {
    setIsError(true)
    setError(error)
  }

  React.useEffect(() => {
    const unsubscribe = onAuthStateChanged(firebaseAuth, authChangeHandler, authErrorHandler)
    return unsubscribe
  }, [firebaseAuth]) // eslint-disable-line react-hooks/exhaustive-deps

  return {
    isLoading,
    isSuccess,
    isError,
    error,
    reset
  }

}

export default useSubscribeToAuthChange

[szQocks]

Михаил, у тебя в app есть хук useRedirectToInitialPage который отслеживает стор и т.д, и редиректит куда ты там указал, так виртуальное дерево перебирается с верху в низ, то и поэтому у тебя в дочернем компоненте не отрабатывает редирект так как он отрабатывает в app

Answer 1

[Дмитрий Путилов]

Рендеринг компонентов с верху вниз, с начало рендерится у тебя компонент App, а потом его дочерний элемент AuthManager, но так как ты вызываешь useRedirectToInitialPage в App, компонент AuthManager не успевает от рендерится, потому что в App useRedirectToInitialPage редеректит туда, куда ты указал