Nested Routes not rendering for <CompatRoute>

[laabroms]

Hi there,

I am working on upgrading from react-router v5 to v6 by following the migration guide. In my app, I have quite a few nested switch components. After switching the Routes to CompatRoutes, the switch does not render anything. Any suggestions of how to work around this?

Root switch:
<Switch> <CompatRoute path="/administration" component={AdministrationDashboard} /> </Switch>
(I have tried setting the path to "/administration/*" to no avail)

AdministrationDashboard:
<> { /* ...some components */} <AdminRouter /> </>

AdminRouter:
<Switch> <CompatRoute path="/administration/general" component={AdminGeneral} /> <CompatRoute path="/administration/settings" component={AdminSettings} /> <CompatRoute path="/administration/help" component={AdminHelp} /> </Switch>

When the route pathname is "/administration/general", for example, the other components in AdministrationDashboard render, but none of the Routes in the AdminRouter are returned.

Any help is much appreciated!

[laabroms]

Fixed the issue by upgrading the AdminRouter to v6 Routes and Route, along with relative paths

[jamiek-acl]

I resolved this problem by doing this: #8907

[xinbaihui]

My question is a little different. The first layer of CompatRoute can be rendered but the second layer CompatRoute can't be rendered.

  <Switch>
     <CompatRoute key="path1" path="/path_1"><div>path 1</div></CompatRoute> // rendered ok
 
     <CompatRoute key="path2" path="/path_2">
           <Switch>
             <CompatRoute key="path2" path="/path_2"><div>path 2</div></CompatRoute> // render nothing
           </Switch>
     </CompatRoute> // render nothing
  </Switch>

Not resolved yet.

[lcsvcn]

To help anyone facing the same issue, I’d like to share what worked and what didn’t work for me.

If you’ve arrived here, you probably have a Nested Switches situation. For context, Nested Switch is an anti-pattern that was likely supported in versions 5.1 and earlier, but it broke when migrating using the compatibility library that supports both versions 5 and 6.

You cannot nest es. A treats all of its direct children as element, so a in a will act as a pathless .

For anyone that wants to reasearch more, these are related issue talking about Nested Switches:

• Nesting Switches #6199
• Don't nest Switch components FullstackAcademy/boilermaker#107

Now lets dive into the solution I found and that worked is here.

Here are some considerations from my testing:

• SubSwitch doesn’t work. Instead, use Switch and CompatRoute. Skip the CompatRoute migration step and use directly Routes and Route from version 6 directly.

// This did not work for me
const SubSwitches = () => (
  <Switch>
    <CompatRoute index element={<BackgroundPage />} />
    <CompatRoute
      path={toYourRelativePath()}
      element={
        <>
          <BackgroundPage />
          <AddModal />
        </>
      }
    />
  </Switch>
);

• SubRoutes require relative paths. If you’re using absolute paths, you’ll need to refactor them.
• If you’re using some routes as modals, you may need to add both the modal component and the route component to your element. For example, you could do something like this:

// Sub-routes pattern for nested routing with modals overlaying base components.
const SubRoutes = () => (
  <Routes>
    <Route index element={<BackgroundPage />} />
    <Route
      path={toYourRelativePath()}
      element={
        <>
          <BackgroundPage />
          <AddModal />
        </>
      }
    />
  </Routes>
);

Some points noted, while Nested Switches aren't supported on v6, looks like Nested Routes works fine.