Recommended way to use Modals with routing?

[tim-coutinho]

From what I can tell, a Modal is supposed to work by always being mounted, then altering its opened prop to animate it in. When using routing (react-router v6 in my case) say I have my my app at / and my modal as a child at /modal, so it's only mounted when at /modal. If I just set the opened prop to a static true and navigate to /modal, the modal just appears without animation. I tried getting around this by not rendering the modal at the route but instead just having it always rendered within the app at /, and setting its opened prop to location.pathname.endswith("modal"), which worked, but felt incredibly hacky. For now I have the modal rendered at /modal, and I've just created a visible prop within the Modal and have the following useEffect block:

useEffect(() => {
  if (!visible) {
    setTimeout(() => setVisible(true), 0);
  }
}, []);

as well as the following as the onClose for the modal:

() => {
  setFormVisible(false);
  setTimeout(() => navigate("/"), 300); // Default modal transition duration
}

This works and animates correctly, but still feels very hacky. Is there a recommended way of going about this?

[rtivital]

I do not see anything wrong with location.pathname.endswith("modal"), I would do it similar way

[tim-coutinho]

Fair enough. Just wanted to see if there was an easy way to play along with what seemed like the way react-router wanted me to do things.