使用 React Router v6 渲染具有自定义布局的组件
在 React 中,组件允许您为应用程序定义路由并指定应根据当前 URL 呈现的组件。当使用不同类型的页面时,例如需要没有导航元素的自定义布局的登录页面,有必要了解如何控制组件的布局。
React Router v6 引入了一个称为“的概念”嵌套路线。”这允许您创建一个将用作其他路由的父级的布局组件。在此布局组件中,您可以包含导航栏和侧边栏等共享元素。
要实现此目的,您可以创建一个包含导航栏和侧边栏的 AppLayout 组件。然后,在您的 App 组件中,将除登录页面之外的所有路由包装在 AppLayout 中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | import { Outlet } from 'react-router-dom' ;
const AppLayout = () => (
<>
<NavBar />
<SideBar />
<main className={styles[ 'main--container' ]}>
<div className={styles[ 'main--content' ]}>
<Outlet />
</div>
</main>
</>
);
import { Routes, Route } from 'react-router-dom' ;
import { AppLayout } from './AppLayout' ;
import LoginPage from './LoginPage' ;
import Dashboard from './Dashboard' ;
const App = () => {
return (
<>
<Routes>
<Route path= '/login' element={<LoginPage />} />
<Route element={<AppLayout />}>
<Route path= '/' element={<Dashboard />} />
</Route>
</Routes>
</>
);
};
|
登录后复制
或者,您可以使用 useRoutes 钩子或 。带有数据路由器的组件(在 v6.4.0 中引入)来实现相同的结果。具体选择哪种方式取决于您的喜好和应用需求。
以上是如何使用 React Router v6 渲染具有自定义布局的 React 组件?的详细内容。更多信息请关注PHP中文网其他相关文章!