Почему содержимое шляпы не меняется, когда я нажимаю на куртку?

Question

[miliko mikoyan]

У меня есть компонент Nav, он имеет три ссылки. Первая ссылка ведет на главную страницу, а 2 и 3 открывает компонент Hat. В свою очередь, он отправляет запрос на сервер и получает массив объектов. Когда я нажимаю на шляпу, а потом на куртку на экран, ничего не меняется, я не могу понять, почему не меняется содержание глав.мой код

const Nav = () => {
  return (
    <Router>
      <NavLink to={"/"}>{"Foo"}</NavLink>
      <NavLink to={"/male/hat"}>{"hat"}</NavLink>
      <Switch>
        <Route path={"/"} exact render={() => <div>'100'</div>} />
        <Route path={"/male/:hat"} exact render={() => <Hat />} />
      </Switch>
    </Router>
  );
};

const Hat = () => {
  const [arrProd, setArrProd] = useState([]);
  useEffect(() => {
    (async () => {
      await fetch(`https://foo0022.firebaseio.com//male/hat.json`)
        .then(res => res.json())
        .then(arr => setArrProd(Object.values(arr).flat()));
    })();
  }, []);
  console.log(arrProd);
  return (
    <Fragment>
      {arrProd.map(({ to, id, price, title }) => (
        <Fragment key={id}>
          <br />
          <NavLink to={`/male/hat/${to}`}>{title}</NavLink>
          <Route
            exact
            path={`/male/hat/${to}`}
            render={() => <div>{price}</div>}
          />
        </Fragment>
      ))}
    </Fragment>
  );
};

Answer 1

[Антон Спирин]

Вы передаете вторым аргументом в useEffect пустой массив. Это значит, что функция колбек будет вызвана только при монтировании компонента. Вам следует передавать в массив второго аргумента match.url, тогда колбек будет вызываться после монтирования и каждый раз при изменении url.

const Hat = ({ match }) => {
  // ...
  useEffect(() => {
    fetch(`https://foo0022.firebaseio.com//male/hat.json`)
      .then(res => res.json())
      .then(setArrProd);
  }, [match.url]);
  // ...
}