react router v6 - modal as nested route - cannot render outlet (trying to render modal on top of the existing page)

Question

Can't tell what's wrong with my setup I've tried tweaking the url. If I Link to => '/card/card:Id' it works but navigates to a different route (meaning that I lose the current KanbanBoardPage I want it to be nested because I want modal to have overlay(semi-transparent)).

I'd appreciate your help.

This is how I trigger the link (also tried /board/1/card/2 etc...)

<Link to={`/card/${card.id}`}>

//My setup

const App = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/' element={<LandingPage />} />
                <Route path='/auth' element={<AuthPage />} />

                <Route
                    path='/boards'
                    element={
                        <RequireAuth>
                            <BoardsPage />
                        </RequireAuth>
                    }
                />
                <Route
                    path='/board/:boardId'
                    element={
                        <RequireAuth>
                            <KanbanBoardPage />
                        </RequireAuth>
                    }
                />
                {/* this is the nested route that I want to render */}
                <Route path='/card/:cardId' element={<EditCardModalPage />} />
                <Route />

                <Route path='/*' element={<NotFound />} />
            </Routes>
        </BrowserRouter>
    );
};

// Kanbanboard Page
    <>
        <KanbanNav
            navFields={{
                id: board.id,
                title: board.title,
                ownerId: board.ownerId,
                members: board.members,
            }}
        />
        <KanbanBoard lists={board.lists} />
        //Shouldn't this render the nested route ?
        <Outlet />
    </>

Answer 1

Solution

    <Route
        path='/board/:boardId'
        element={
            <RequireAuth>
                <KanbanBoardPage />
            </RequireAuth>
        }
    >
        <Route
            path='/board/:boardId/card/:cardId'
            element={<EditCardModalPage />}
        />
    </Route>