Estoy creando una aplicación de reacción que contiene una barra lateral con elementos secundarios.
quiero abrir y componentes bajo administrar/url (como administrar/sub1, administrar/sub2).
Traté de crear una ruta anidada dentro de /manage pero se está redirigiendo nuevamente a /manage. ¿Hay alguna manera de hacer esto?
const App = () => ( <div> <Routes> <Route path="/" element={<PublicRoute />}> <Route path="login" element={<Login />} /> </Route> <Route path="/" element={<PrivateRoute />}> <Route path="dashboard" element={<Dashboard />} /> <Route path="manage" element={<Manage />} /> <Route path="sub1" element={<Sub1 />} /> <Route path="sub2" element={<Sub2 />} /> </Route> </Routes> </div> );mi código de navegación de la barra lateral
<NavItem link="/manage" icon={HappinessIcon} label="Manage" hasSubItem> <div> <NavSubItem link="/sub1" label="Sub Item 1" /> <NavSubItem link="/sub2" label="Sub Item 2" /> </div> </NavItem>después de leer la documentación de v6, descubrí que el anidamiento no me ayudará en esta situación. solo necesito agregar administrar / delante de todos los subelementos.
<Route path="manage/sub1" element={<Sub1 />} /> <Route path="manage/sub2" element={<Sub2 />} />en mi código de navegación de la barra lateral
<NavItem link="/manage" icon={HappinessIcon} label="Manage" hasSubItem> <div> <NavSubItem link="/manage/sub1" label="Sub Item 1" /> <NavSubItem link="/manage/sub2" label="Sub Item 2" /> </div> </NavItem>eso es todo lo que tenía que hacer, si conoces alguna solución limpia que esta, házmelo saber.
Si desea anidar rutas, puede usar una combinación de diseño y rutas de índice para lograrlo.
Ejemplo:
<Routes> <Route element={<PublicRoute />}> <Route path="/login" element={<Login />} /> </Route> <Route element={<PrivateRoute />}> <Route path="/dashboard/*"> <Route index element={<Dashboard />} /> </Route> <Route path="/manage/*"> // layout to allow nested route matching <Route index element={<Manage />} /> // "/mangage" <Route path="sub1" element={<Sub1 />} /> // "/mangage/sub1" <Route path="sub2" element={<Sub2 />} /> // "/mangage/sub2" </Route> </Route> </Routes> Si el componente Manage representa enlaces, pueden ser enlaces relativos
<NavSubItem link="sub1" label="Sub Item 1" /> <NavSubItem link="sub2" label="Sub Item 2" />De lo contrario, si está procesando todos los enlaces de un solo componente en/en/cerca de la raíz, es probable que necesite usar enlaces absolutos.
<NavSubItem link="/manage/sub1" label="Sub Item 1" /> <NavSubItem link="/manage/sub2" label="Sub Item 2" /> La diferencia entre enlaces relativos y absolutos es el carácter de barra inclinada "/" .