Por favor cambie el padre a
Estoy recibiendo una advertencia en la aplicación de React:
Has renderizado un descendiente <routes (o="" has="" llamado="" a=""></routes><code>useRoutes()</code>) en "/" (debajo de <route path="/">),
pero la ruta padre no tiene un "*" al final. Esto significa que si navegas más profundamente,
la ruta padre ya no coincidirá y, por lo tanto, las rutas hijas nunca se renderizarán.
Por favor, cambia la <route path="/"> padre a <route path="*">.
Aquí está mi código:
<router>
<routes>
<route exact="" path="/login" element=""></route><login></login>} />
<route exact="" path="/" element=""></route><appbody></appbody>} >
<route exact="" path="/add-edit-profile" element=""></route><pagecontent></pagecontent>} />
<route exact="" path="/profile-list" element=""></route><profilelist></profilelist>} />
</routes></router></route>
AppBody.js:
<sidebar></sidebar>
<div classname='page-content'>
<header></header>
</div>
<routes>
<route exact="" path="/add-edit-profile" element=""></route><pagecontent></pagecontent>} />
<route exact="" path="/profile-list" element=""></route><profilelist></profilelist>} />
</routes>
¿Qué debo cambiar en mi código para solucionar la advertencia?
davy.ai
La advertencia indica que la ruta principal del padre debe tener un “*” al final para coincidir con cualquier ruta secundaria más abajo en la jerarquía. Para solucionar esto, cambia la ruta del padre
path="/"apath="*"en ambas instancias donde aparece.Haciendo este cambio, cualquier ruta secundaria coincidirá con la ruta principal y se renderizará como se espera.