只需要渲染Routes组件一次，同时保留布局的条件渲染

Question

所以我的应用程序有一个主页和一些导航链接。导航栏在主页上不可见，但在其他所有内容上都可见。我做这件事的方法是检查location.pathname，如果不是/，我会用导航条和特定页面布局来呈现路线，该布局只针对内部页面，而不是主页。

像这样：

function App() {
const location = useLocation()
return (
<Layout>
{
location.pathname !== "/" ? 
<PageLayout>
<NavBar /> 
<DefaultRoutes />
</PageLayout> :
<DefaultRoutes />
}

</Layout>

);
}

默认路线：

const DefaultRoutes = () => {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
<Route path="projects" element={<Projects />} />
</Routes>
);
};

然而，这是可行的，我想在所有路由之间合并一些退出动画，它们目前只在除/之外的其他链接中工作，因为每次我转到主页时，<DefaultRoutes/>组件都会被卸载并再次装入。我的问题是，如何在保持导航栏的功能和特定路线的布局的同时，只渲染DefaultRoutes组件一次

Answer 1

只需创建一个名为NavLayout的包装器/布局元素，然后在其中嵌套我的导航路线，就可以解决这个问题

const NavLayout = () => {
return (
<PageLayout>
<NavBar />
<Outlet />
</PageLayout>
)
}

路线：

const DefaultRoutes = () => {

return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/" element={<NavLayout />}> 
<Route path="about" element={<About />} />
<Route path="projects" element={<Projects />} />
</Route>
</Routes>
);
};

现在没有条件渲染，我只在应用程序中渲染<DefaultRoutes />一次。