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

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.

CodePudding user response：

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