Why doesn't the contents of the hat change when I click on the jacket?

Question

React

I have a Nav component, it has three links. The first link leads to the main page, while 2 and 3 open the Hat component. In turn, it sends a request to the server and receives an array of objects. When I click on the hat and then the jacket on the screen, nothing changes, I can't figure out why the content of the chapters doesn't change. my code

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

You are passing an empty array as the second argument to useEffect. This means that the callback function will only be called when the component is mounted. You should pass match.url in the array of the second argument, then the callback will be called after mounting and every time the url changes.

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