在React Router v6中,你可以通过以下方式实现具有固定侧边栏和动态内容的布局。
import { Outlet } from 'react-router-dom';
import Sidebar from './Sidebar';
import Cards from './Cards';
const App = () => {
return (
<div style={{ display: 'flex' }}>
<Sidebar />
<Cards />
<div style={{ flex: 1, marginLeft: '250px' }}>
{/* Outlet 渲染匹配的子路由组件 */}
<Outlet />
</div>
</div>
);
};
export default App;
在这个例子中,Sidebar
和 Cards
组件被渲染在左侧,而 Outlet
组件则会在右侧渲染匹配的子路由组件。右侧容器上的 flex: 1
样式确保它占据剩余空间,将内容推送到右侧。
现在,你的路由器配置可能看起来像这样:
const router = createBrowserRouter([
{
path: '/',
element: <App />,
children: [
{
index: true,
element: <div>首页</div>,
},
{
path: 'notes/:id',
element: <Note />,
},
],
},
]);