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

Posted 2023-02-21

【中文标题】如何在 React-Router 中的路由之间共享状态？

【英文标题】：How do I share state between routes in React-Router?

【发布时间】：2022-01-14 14:30:21

【问题描述】：

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

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

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

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

【问题讨论】：

你看过 mui Persistent 抽屉了吗？ mui.com/components/drawers 这实际上应该为您提供所需的一切:)

【参考方案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
  
));

【讨论】：

完美运行，感谢您的帮助！