如何在 React-Router 中的路由之间共享状态？

Question

我在 SO 上看到了一些与此类似的问题，但没有一个完全符合我的需求。我正在使用 React 和 Material-UI 来制作仪表板。我使用 Material-UI 的迷你变体抽屉作为侧边栏，单击时应显示路线的链接。侧边栏可以通过单击按钮打开，该按钮会更新状态变量并调整侧边栏的 CSS className。这会导致侧边栏/抽屉“滑动”打开。

如果我单击侧边栏上的链接，我可以轻松地显示所需的路线。但是，当侧边栏/抽屉打开时，我无法获得“滑动”到一边的路线。通过查看代码可能会更容易理解，所以我在下面提供了一个代码框的链接：

https://codesandbox.io/s/appbar-with-react-router-bkogj?file=/src/App.js

我基本上从 Material-UI 网站复制并粘贴了所有内容（我相信使用 v4），然后自己添加了路线。如有任何关于如何解决此问题的反馈，我们将不胜感激。

Answer 1

为此，我认为MiniDrawer 组件需要渲染内容，因为它必须知道应用栏和抽屉组件占用的空间。

迷你抽屉

获取并渲染一个children 道具。

export default function MiniDrawer({ children }) {
  ...

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar
        ...
      >
        ...
      </AppBar>
      <Drawer
        ...
      >
        ...
      </Drawer>
      <main className={classes.content}>{children}</main>
    </div>
  );
}

应用

将Outlet 渲染为子组件。

export default function App() {
  return (
    <div className="App">
      <AppBar>
        <Outlet />
      </AppBar>
    </div>
  );
}

拒绝表

移除多余的边距，使其填充父组件允许的内容区域。

const useStyles = makeStyles((theme) => ({
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
    height: "100%",
    // marginLeft: "4em" // <-- remove
  }
}));