Widget in production interferes with react router

[suzimioko]

I have a react typescript webapp which uses react router @6.22.3

The router is build in the following way

const routes: RouteObject[] = [
  {
    path: "detailedView",
    children: [
      {
        path: "somePath",
        element: <SomeComponent />,
      },
      {
        path: "detailedView",
        children: [
          {
            path: Blockchain.ARBITRUM,
            element: <ImportantComponent />,
          },
        ],
      },
    ],
  },
];

The App.tsx looks like this

const App: React.FC = () => {
  const content = useRoutes(router);

  return (
          {content}
  );
};

Then deep inside of the ImportantComponent at some point I use LiFi widget which is shown when the user clicks on a Button (before that there are some popups which tell the user that the widget comes from LiFi and is not mine

    <Dialog
      open={open}
      onClose={handleClose}
      disableScrollLock={disableScrollLock}
    >
      <LiFiWidget
        config={config}
        integrator="integrator-string"
        fee={0.0075}
      />
    </Dialog>

On the localhost, everything works fine, I can use the widget and trade, etc.
If I publish the website on Netlify, it also works fine (let's call that a "staging" phase)

Actual bug

Then, when I publish it on my production (which is hosted on Cloudflare) I run into a problem. When interacting with the LiFi widget, every click redirects the user to a respective path (ON MY PAGE!!!). So for example, clicking on "From"

the user is taken to the path /from-token

When clicking on settings, the user is taken to the path /settings

I have no idea how to approach the troubleshooting of this, so I'd appreciate any help/input.

[suzimioko]

Apparently routing was changed in #367 and #370

The issue lies somewhere deep in the react-router-dom, if I update it to the newest version (also used in widget) the problem occurs. Otherwise it does not.

Scratch the part where it works differently in dev and production. It occurs everywhere with the react-router-dom version 6.30.0

When using version 6.29.0 everything is okay. Can someone shine some light on this ? :D

[chybisov]

@suzimioko hey, those PRs you shared are not about React Router, but about swapping/bridging routes (quotes). Could you please check these docs and tell if that works for you https://docs.li.fi/integrate-li.fi-widget/react-router-compatibility

[suzimioko]

@chybisov if I counted how many times I read that page I'd be in overflow...

The thing is, LiFi Widget is not on its own route, it is part of something else, so for me to do that

<Routes>
    <Route path="/swap/*" element={<LiFiWidgetPage />} />
  </Routes>

Does not really accomplish what it should, right? Or do I completely understand this in a weird way and I'm waaay way off?

[chybisov]

@suzimioko, that path is just an example. Have you tried to put an * (asterisk) at the end of your path?

[suzimioko]

Oopsie, sorry for the spam

@chybisov putting an asterisk at the end of the path of the component whose child is LiFiWidget? Sure yes.

Could this maybe be due to the 6.29 -> 6.30 https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6300 release?

I mean, how does the widget interact with my ? Since I see that the widget decides whether to use Fragment or MemoryRouter here const Router = inRouterContext ? Fragment : MemoryRouter (in AppProvider widget\packages\widget\src\AppProvider.tsx)