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.