Here is the Routes
AnimatePresence is from 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>
Problem:-
On ActionDashboard(Landing Page) component there is NavLink to other component, in cards form, after user navigate to any one of the component User can use menu to navigate also to ActionDashboard, Now first time navigation from Landing Page to other page work perfectly, but user visit landing page again and navigate second time to any page Landing Page does not get unmounted. What happens is Outlet is getting Appending in root div tag, And problem does not occurs when user navigate with menu
PageLayout Component
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className=”OutLet” >
</motion.div>
DOM on first time
DOM on Second time
I try putting ActionDashboard in different group does not work
Why Layout component is appending in root div