react router v6-modal作为嵌套路由-无法呈现outlet(试图在现有页面的顶部呈现modal)

Question

无法判断我的设置有什么问题，我已经尝试过调整url。如果我链接到=>'/card/cad:Id‘它工作，但导航到不同的路线(这意味着我丢失了当前的看板页面，我希望它嵌套，因为我希望模态具有覆盖(半透明((。

我很感激你的帮助。

这就是我触发链接的方式(也尝试过/板/1/卡/2等(

<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

解决方案

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