Modal - React Router implementation

[amarmechai]

can we integrate Modal routes with this project?

Reference : Create contextual modal navigation with React Router V6

IRoute

export interface IRoute {
  ...

  modal?: boolean;
}

We can use this method de get all modal routes

const getModalRoutes = (routes: IRoute[]) => {
  return routes
    .map(route => {
      let modalRooutes: IRoute[] = [];
      const { children, ...rest } = route;

      if (rest.modal)
        modalRooutes.push(rest);

      if (children)
        modalRooutes.push(...getModalRoutes(children));

      return modalRooutes;
    })
    .reduce((accumulator, value) => accumulator.concat(value), []);
}

[nichitaa]

Hi @amarmechai, I think it is possible to do so, if it is urgent you could open a PR, as I would have some time only at the end of the week to see how to implement it.

• But isn't it possible to achieve with query params (to show/close modal) ?

• As well from the first look, there is a possibility that the use of useLocation hook at the root of our App component would trigger re-renders whenever page changes, which would force all Route components to re-render, (if there would be common layout with some Outlets component, layout would probably re-render, even if it'd be common for a single Route)

const location = useLocation();

[amarmechai]

Hi @nichitaa, thank you for the answer.
With query params, it should be possible 🤔 !