Tengo las siguientes rutas en mi archivo App.tsx:
import { default as Collections } from './pages/collections/Root'; <Routes> <Route path="/" element={<Home />} /> <Route path="/collections/*" element={<Collections />} /> </Routes>
Y esto es lo que tengo en mi archivo de Collections
:
const Root = () => { return ( <> <DocumentTitle title="Collections" /> <Navbar baseUrl="/collections" /> <Routes> <Route path="/collections" element={<Collections />} /> <Route path="/collections/create" element={<AddCollection />} /> <Route path="/collections/categories" element={<Categories />} /> <Route path="/collections/edit/:collectionId" element={<EditCollection />} /> <Route path="/collections/addItems/:collectionId" element={<ManageCollectionItems />} /> </Routes> </> ); }; export default Root;
Cuando visito la URL /collections
, puedo ver que el título del documento y la barra de navegación se han cargado en el DOM; sin embargo, no veo ninguna de mis rutas anidadas y tampoco recibo ningún error o advertencia.
Sus rutas de nivel superior se ocupan de la parte /collections
de la URL, por lo tanto, las rutas anidadas que también tienen /collections
me harían preguntarme si el enrutador espera que su URL sea /collections/collections