What is the best way to reuse group of routes?

[ivankhm]

Hi!

In my SPA React app I have a group of Routes that relate to particular business logic, for example a payment flow:

<Routes>
  <Route path="payment">
    <Route path="step-one" element={<PaymentStepOnePage />} />
    <Route path="step-two" element={<PaymentStepTwoPage />} />
    <Route path="step-three" element={<PaymentStepThreePage />} />
    // etc.
  </Route>
</Routes>

I want to reuse same routes in a tiny-bit different context (different callbacks, Layout wrapper etc.). And I dont want to copy-paste all 10ish routes like this:

<Routes>
  <Route path="some-cool-page/:some-cool-Id">
    <Route index element={<SomeCoolPage />} />
    <Route path="payment" element={<SpecialLayout />}>
      <Route path="step-one" element={<PaymentStepOnePage />} />
      <Route path="step-two" element={<PaymentStepTwoPage />} />
      <Route path="step-three" element={<PaymentStepThreePage />} />
      // etc.
  </Route>
  </Route>
</Routes>

This flowing solution works for me:

const createPaymentRoutes = ({onSuccess, onFail}: {onSuccess: () => void, onFail: () => void}) => 
  (<Routes>
    <Route path="payment">
      <Route path="step-one" element={<PaymentStepOnePage />} />
      <Route path="step-two" element={<PaymentStepTwoPage />} />
      <Route path="step-three" element={<PaymentStepThreePage onSuccess={onSuccess} onFail={onFail} />} />
      // etc.
    </Route>
  </Routes>);
  
  
 // in App.tsx

 <Routes>
  <Route path="some-cool-page/:some-cool-Id">
    <Route index element={<SomeCoolPage />} />
    <Route element={<SpecialLayout />}>
      {createPaymentRoutes({ onSuccess: coolPageSpecificSuccessCallback, onFail: coolPageSpecificFailCallback})}
    </Route>
  </Route>
  // 50 lines bellow
   {createPaymentRoutes({ onSuccess: defaultOnSuccessCallback, onFail: defaultOnFailCallback})}
</Routes>

But my gut tells me its a mistake and there is a better way to do it.

I didn't find any similar cases, so may be I have the overall wrong approach for this kind of code reuse in React?

[eimerreis]

I'm having a similar code duplication across my project, especially since we are using a lot of overlays & modals that have a route.

More specifically, we are having two Pages that both show a table of items where users can perform the same actions. This leads to having a lot of duplicate routes, which is basically not a problem for me, but I wasn't sure whats the best way not to write the same route definition over and over again

<Routes>
    <Route element={<ToolsPage />} path="tools">
        <Route element={<RoutedOverlay />} path="overlay">
            <Route element={<EditMasterdata />} path={EditMasterdata.Route} />
            <Route element={<InstanceOverlay />} path={InstanceOverlay.Route} />
        </Route>
    </Route>
    <Route element={<ServiceOrdersPage />} path="service-orders">
        <Route element={<RoutedOverlay />} path="overlay">
            <Route element={<EditMasterdata />} path={EditMasterdata.Route} />
            <Route element={<InstanceOverlay />} path={InstanceOverlay.Route} />
        </Route>
    </Route>
</Routes>;

[kiliman]

You can try something like:

const nestedRoutes = [
    <Route element={<RoutedOverlay />} path="overlay">
        <Route element={<EditMasterdata />} path={EditMasterdata.Route} />
        <Route element={<InstanceOverlay />} path={InstanceOverlay.Route} />
    </Route>
]

return (
  <Routes>
      <Route element={<ToolsPage />} path="tools">
          {...nestedRoutes}
      </Route>
      <Route element={<ServiceOrdersPage />} path="service-orders">
          {...nestedRoutes}
      </Route>
  </Routes>
)

https://stackblitz.com/edit/github-bfdrdy?file=src%2FApp.tsx

[eimerreis]

thanks @kiliman, nice idea 🙂

is the { ... } spread really necessary?

[kiliman]

Perhaps not. I guess it depends on how your nested routes are structured.