react router v6 - 模态作为嵌套路由 - 无法呈现出口（尝试在现有页面顶部呈现模态）

Question

无法判断我的设置有什么问题我已经尝试调整 url。如果我 Link to => '/card/card:Id' 它有效但导航到不同的路线（这意味着我丢失了当前的 KanbanBoardPage 我希望它被嵌套因为我希望模态有覆盖（半-透明)).

非常感谢你的帮助。

这就是我触发 link 的方式（也尝试了 /board/1/card/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>

react router v6 - 模态作为嵌套路由 - 无法呈现出口（尝试在现有页面顶部呈现模态）

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

reactjs

react-router