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

Question

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

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

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

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

Answer 1

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

迷你抽屉

获取并渲染一个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
  }
}));