useLocation (). pathname в реакции-маршрутизаторе-dom меняется, но когда я помещаю его в оператор if, он продолжает говорить true

Question

Я создаю приложение реакции. Я импортирую useLocation и помещаю его в переменную (местоположение). Я проверяю, если путь не "/", он должен выводить false, но он продолжает говорить true на каждой странице.

import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";

function Header() {
  const [inIndex, setInIndex] = useState();
  let location = useLocation();

  useEffect(() => {
    //Checks if location.pathname is not "/".
    if (location.pathname !== "/") setInIndex(false);
    else setInIndex(true);
  }, []);

  console.log(inIndex); //Keeps saying true

  return null;
}

export default Header;

Заранее спасибо!

Редактировать: Я также проверил что такое location.pathname и это "/", и это строка.

Answer 1

Вы пытались подписаться на изменения в location.pathname в вашем хуке?:

  useEffect(() => {
    //Checks if location.pathname is not "/".
    setInIndex(location.pathname === "/")
  }, [location.pathname]);

PS Вы действительно не нуждаетесь в операторе if, поскольку он вычисляется в обычный bool.

Answer 2

Он вычисляется только один раз, когда компонент монтируется, из-за пустого массива зависимостей. Если вы добавите location в массив зависимостей эффекта, он вызовет обратный вызов при изменении location.

import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";

function Header() {
  const [inIndex, setInIndex] = useState();
  let location = useLocation();

  useEffect(() => {
    //Checks if location.pathname is not "/".
    if (location.pathname !== "/") setInIndex(false);
    else setInIndex(true);
  }, [location]); // <-- add location to dependency array

  console.log(inIndex); //Keeps saying true

  return null;
}

export default Header;

Примечание: Вы также можете просто сохранить обратное исходного условного теста, поскольку вы устанавливаете false, когда условие истинно.

useEffect(() => {
  //Checks if location.pathname is not "/".
  setInIndex(location.pathname === "/");
}, [location]);