How to place GlobalModalWrapper inside RouterProvider

[bigyanpoudel]

How to place GlobalModalWrapper inside RouterProvider

[bigyanpoudel]

Hello @anserwaseem Since the modal is configured outside the configuration of react router. So we need to configure the modal inside the configuration of the routes. So can you try including the modal configuration with in the top most element inside createBrowserRouter

const ModalRouteWrapper = () => {
  useEffect(() => {
    //Registering modal in the dom
    GlobalModal.setUpModal(globalModalRef)
  }, [])
  return (
    <>
      <Outlet />
      <ModalWrapper ref={(el) => (globalModalRef = el)} />
    </>
  )
}

const router =
      createBrowserRouter([
 {
    element: <ModalRouteWrapper />,
    children: [      {
          path: "/",
          element: <Entry entry={app.home} />,
          errorElement: <ErrorPage />,
          children: app.screens.map((screen) => {
            return {
              path: `${screen.name.toLowerCase()}`,
              element: <Screen key={screenId} screen={screen} />,
            };
          }),
        },]},
  
      ])

In this way, you will have browser router access within the modal

[anserwaseem]

Thank you @bigyanpoudel, i've updated code like this:
but nothing is working now, no error no working!

let globalModalRef: any = null;

export const App: React.FC<AppProps> = ({
  appId,
  application,
}) => {
  const resolvedApp = application ?? ApplicationLoader.load(appId);
  const app = Parser.parseApplication(resolvedApp);

  const router = useMemo(
    () =>
      createBrowserRouter([
        {
          element: <ModalRouteWrapper />,
          children: [
            {
              path: "/",
              element: <Entry entry={app.home} />,
              errorElement: <ErrorPage />,
              children: app.screens.map((screen) => {
                return {
                  path: `${screen.name.toLowerCase()}`,
                  element: <Screen key={screenId} screen={screen} />,
                };
              }),
            },
          ],
        },
      ]),
    [app],
  );
  return (
    <ApplicationContextProvider app={app}>
      <ThemeProvider>
        <RouterProvider router={router} />
        <ToastContainer />
      </ThemeProvider>
    </ApplicationContextProvider>
  );
};

const ModalRouteWrapper: React.FC = () => {
  useEffect(() => {
    //Registering modal in the dom
    GlobalModal.setUpModal(globalModalRef);
  }, []);
  return (
    <>
      <Outlet />
      <GlobalModalWrapper ref={(el) => (globalModalRef = el)} />
    </>
  );
};

Note: im using GlobalModalWrapper not the ModalWrapper that you used above

[anserwaseem]

i was missing setting up customModal property,

it's working fine now!

Thank you so much @bigyanpoudel 🥇