React Router 的 Outlet 追加到根 div 中

Question

这是路线 AnimatePresence 来自 Frame-Motion

<AnimatePresence>

<Routes location={location} key={location.pathname}>

<Route path="Auth" element={<PageLayout />} >
<Route path="action-dashboard" element={<ActionDashboard />} />
<Route path="Buget-Revenue-Risk" element={<RiskPage />} />
<Route path="Revenue-Risk" element={<RiskPage />} />
<Route path="Dashboard" element={<Dashboard />} />
<Route path="Add-Update-Phase" element={<AddUpdatePhasePage />} />
<Route path="Add-Update-Project" element={<Add\_updateProjectPage />} />
<Route path="Create-CTC" element={<CreateCTC />} />
<Route path="Create-CTC-From-Risk" element={<CreateCTC />} />
<Route path="CTC-Review" element={<CTCReview />} />
<Route path="CTC-Details" element={<CTCDetails />} />
<Route path="Project-Snapshot" element={<ProjectSnapshot />} />
<Route path="Zonal-Dashboard" element={<ZonalDashboard />} />
<Route path="Risk-Discovery" element={<RiskDiscovery />} />
<Route path="Cost-dashboard" element={<CostDashboard />} />
<Route path="price-dashboard" element={<PriceDashboard />} />
<Route path="phase-master" element={<PhaseMaster />} />
</Route>
<Route index path="\*" element={<AuthorizationPage />} />
</Routes>
</AnimatePresence>

问题：-

在 ActionDashboard（登陆页面）组件上，有到其他组件的 NavLink，以卡片的形式，在用户导航到任何一个组件后，用户可以使用菜单也导航到 ActionDashboard，现在第一次从登陆页面导航到其他页面工作完美，但用户再次访问登陆页面并第二次导航到任何页面登陆页面不会被卸载。发生的情况是 Outlet 正在根 div 标签中追加，并且当用户使用菜单导航时不会出现问题

页面布局组件

第一次使用 DOM

DOM 第二次

我尝试将 ActionDashboard 放在不同的组中不起作用 为什么布局组件附加在根 div 中

Answer 1

问题解决了 原因：通过错误链接导航到操作仪表板是相对路径而不是绝对路径，因此出现问题