Используйте эффект каждый раз, когда меняется location.pathname

Question

У меня есть эта переменная с именем nameScreen, которая мне нужна для изменения нашего значения каждый раз, когда меняется location.path:

<Typography variant="h6" noWrap>
    {nameScreen}
</Typography>

Я пытаюсь:

const [nameScreen, setNameScreen] = useState('')

const location = useLocation();

useEffect(() => {
    changeTitleHeader()
        // eslint-disable-next-line react-hooks/exhaustive-deps
},[location.pathname])

  const changeTitleHeader = () => {
      if (location.pathname === '/home') {
        setNameScreen('Welcome to home!')
      }
      else if(location.pathname === '/users') {
          setNameScreen('Users')
      }
      else if(location.pathname === '/companies') {
        setNameScreen('Companies')
      }
  }

Мне нужно каждый раз, когда мои location.pathname изменяются, у этого компонента типографики появляется новое значение, основанное на имени маршрута.

Мой useEffect() не вызывается при изменении location.pathname. Как я могу это исправить?

Answer 1

Вам нужна зависимость от location.pathname в вашей функции changeTitleHeader, а не только от useEffect. Функция запоминает начальное значение location.pathname и никогда не обновляет его, поэтому она не делает ничего нового при вызове.

Вы можете использовать useCallback для этой цели. Вот код:

const changeTitleHeader = useCallback(() => { sameThing() }, [location.pathname]);

Я предполагаю, что состояние не обновляется должным образом, но если ваш useEffect на самом деле не запускается, проблема может быть в другом месте. Надеюсь, это поможет.