'React Router v6 not showing nested route - what am I missing?

I have in my index the following routes:

    <BrowserRouter>
        <Routes>
            <Route path="/" element={<App />} />
            <Route path="admin" element={<AdminDashboard /> } />
        </Routes>
    </BrowserRouter>

I can access / and admin, and the components render correctly.

Inside AdminDashboard, I have two other routes:

        <Routes>
            <Route path="/" element={<AdminCards />} />
            <Route path="news-sources" element={<NewsSourcesAdmin /> } />
        </Routes>

If I access http://localhost/ and http://localhost/admin, I get things to render correctly.

However, if I attempt to go to http://localhost/admin/news-sources, then the NewsSourcesAdmin component does not render. I get an empty page instead.

Shouldn't the AdminDashboard component render given I'm under the admin route, and then the NewsSourcesAdmin component render inside of it given I am under the /admin/news-sources route?

I am on React 17, React Router v6.

What am I missing?

reactjs react-router

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'React Router v6 not showing nested route - what am I missing?

Sources

Related Questions