Routing inside microfrontends

[michi-7]

Hi everyone,
is it possible to achieve agnostic routing inside microfrontends using this library?
Let me explain what I mean by agnostic.

Host

const Host = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/mfe1" element={<Mfe1/>} />
      <Route path="/mfe2" element={<Mfe2/>} />
    </Routes>
  </BrowserRouter>
)

Mfe1

const Mfe1 = () => (
  <Routes>
    <Route path="foo" element={<Foo />} />
    <Route path="bar" element={<Bar />} />
  </Routes>
)

If I'm inside Foo, how can I navigate to Bar without knowing that the first part of the path is /mfe1? How can I change only the part of the url managed by the microfrontend? So from localhost:3000/mfe1/foo to localhost:3000/mfe1/bar

What I tried:

• navigate('/bar') changes the entire url to localhost:3000/bar so it doesn't work.
• navigate('bar') append bar at the end of the current url localhost:3000/mfe1/foo/bar.
• navigate('../bar') it's not a valid solution because Foo component doesn't know how much it must go back to reach the starting point where it needs to add /bar.

How does microfrontend navigation is managed in this case? Is it possible or I need to pass the first part of the path to each microfrontend ? Thank you for your help

[msc117]

Could share route constants across MFEs, although breaking change constant updates will be hard.

Best bet is not use relative paths and constants are all full pathnames