reactjs 有没有一种方法可以让侧边栏沿着与右侧内容保持一致，并且在React Router v6中仍然有嵌套的路由？

acruukt9 于 5个月前发布在 React

关注(0)|答案(2)|浏览(60)

此问题在此处已有答案：

Making sidebar available for all components | React JS | React Router v6（1个答案）
昨天就关门了。
我希望在右侧有一个带有一些卡片的侧边栏。当我单击卡片时，我希望导航到名为Note的组件，但左侧仍有侧边栏。
我跟踪了这个https://reactrouter.com/en/main/start/tutorial，但他们没有正确的内容，所以它的工作。我试图找到它无处不在，但不能。
这是我的路由器到目前为止（应用程序有边栏和卡）：

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "notes/:id",
        element: <Note />,
      },
    ],
  },
]);

字符串

reactjs

来源：https://stackoverflow.com/questions/77765218/is-there-a-way-to-keep-the-sidebar-along-with-right-side-content-and-still-have

2条答案

按热度按时间

wfauudbj1#

在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 renders the matched child route component */}
        <Outlet />
      </div>
    </div>
  );
};

export default App;

字符串
在本例中，Sidebar和Cards组件呈现在左侧，Outlet组件呈现在右侧匹配的子路由组件。右侧容器上的flex：1样式确保其占用剩余空间，将内容推到右侧。现在，您的路由器配置可能如下所示：

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        index: true,
        element: <div>Home Page</div>,
      },
      {
        path: 'notes/:id',
        element: <Note />,
      },
    ],
  },
]);

型

赞(0）回复(0）举报 5个月前

qq24tv8q2#

您应该通过import { Outlet } from "react-router-dom"将<Outlet/>组件添加到<App/>组件中。

赞(0）回复(0）举报 5个月前