2

I am working on building a microfrontend POC in React using ModuleFederation

My question surrounds best practices when it comes routing ['react-router-dom v6']

Currently, I have my application split into 3 separate microfrontends: Shell, Container, Header

In my case, my Header needs access to the url params to be able to read params using useParams hook provided by react-router-dom

For this to happen, I must provide a path inside react router to have access

Header MFE

<Router>
 <Routes>
    <Route path="/stores/:storeId/:tabId/*" element={<Header />} />
 </Routes>
</Router>

When I export this using ModuleFederation, I am currently omitting the wrapped router and just exposing the <Header /> so that the Container can provider the Router, etc

This is where I run into my conundrum...

My Header component will technically live outside the main router so that the Container can serve its routes and respective paths

Container MFE

<Layout style={{ minHeight: '100vh' }}>
  <Header /> <== does not work / no access to params
  <MainContent>
    <Routes>
       <Route
         path="/stores/:storeId/dashboard"
         element={<h3>dashboard</h3>}
       />
    </Routes>
  </MainContent>
</Layout>

Normally this would not be a problem except the fact that both the Header and dashboard component technically fall within the same route restricting me the ability to group in main route as seen below.

Duplicated routes

<Layout style={{ minHeight: '100vh' }}>
  <MainContent>
    <Routes>
       <Route path="/stores/:storeId/:tabId/*" element={
         <>
           <Header />
           <MainContent>
             <Outlet />
           <MainContent>
         </>
         }>
         <Route
           path="/stores/:storeId/dashboard"
           element={<h3>dashboard</h3>}
         />
      </Route>
    </Routes>
  </MainContent>
</Layout>

path="/stores/:storeId/:tabId/* <= header nav needs access to these params so it will only load if this route is matched

path="/stores/:storeId/dashboard" <= direct route in which :tabId equals dashboard in this case

I want the header to always be present

I experimented with this approach and it worked but it seems dirty:

<Layout style={{ minHeight: '100vh' }}>
  <Routes>
     <Route path="/stores/:storeId/:tabId/*" element={<Header />} />
  </Routes>
  <MainContent>
    <Routes>
       <Route
         path="/stores/:storeId/dashboard"
         element={<h3>dashboard</h3>}
       />
    </Routes>
  </MainContent>
</Layout>

Is this a bad practice or am I looking at it the wrong way and this is in fact okay to do?

Should I be exporting the <Header /> wrapped in its own routes?

Reactify
  • 29
  • 1
  • 5

1 Answers1

0

After digging deeper into the documentation, it seems having many declarations is acceptable

React Router v6

Reactify
  • 29
  • 1
  • 5