Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

88
Vistas
Why are my nested route components not rendering in react-router-dom 6?

I have the following routes in my App.tsx file:

import { default as Collections } from './pages/collections/Root';

<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/collections/*" element={<Collections />} />
</Routes>

And this is what I have in my Collections file:

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;

When I visit the /collections URL, I can see that the document title and navbar have loaded in the DOM, however, I don't see any of my nested routes and I'm also not receiving any errors or warnings.

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Your top level Routes is taking care of the /collections part of the URL, therefore the nested routes also having /collections would make me wonder if router is expecting your URL to be /collections/collections

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos