Recibo esta advertencia en la aplicación React:
You rendered descendant <Routes (or called `useRoutes()`) at "/" (under <Route path="/">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render. Please change the parent <Route path="/"> to <Route path="*">.Aquí está mi código:
<Router> <Routes> <Route exact path="/login" element={<Login />} /> <Route exact path="/" element={<AppBody />} > <Route exact path="/add-edit-profile" element={<PageContent />} /> <Route exact path="/profile-list" element={<ProfileList />} /> </Route> </Routes> </Router>AppBody.js:
<Sidebar/> <div className='page-content'> <Header /> </div> <Routes> <Route exact path="/add-edit-profile" element={<PageContent />} /> <Route exact path="/profile-list" element={<ProfileList />} /> </Routes>¿Qué debo cambiar en mi código para corregir la advertencia?
Significa que AppBody está representando rutas anidadas más profundas y la ruta debe especificar el carácter comodín * para indicar que puede coincidir con rutas más genéricas/anidadas. Las rutas de ruta react-router-dom siempre coinciden exactamente, por lo que si se procesan subrutas, la ruta debe permitirlas. Cambie path="/" a path="/*" .
Dado que AppBody representa las rutas y no tiene Outlet para los componentes de Route anidados, se pueden eliminar de forma segura.
<Router> <Routes> <Route exact path="/login" element={<Login />} /> <Route exact path="/*" element={<AppBody />} > /> </Routes> </Router>