Comment puis-je partager l'état entre les itinéraires dans réact-routeur?

Question

J'ai vu quelques questions similaires à celles-ci sur SO mais aucun qui correspondait à mes besoins. J'utilise React et matières-ui pour faire un Tableau de bord. J'utilise le tiroir de la variante de Matière-UI en tant que barre latérale, avec des liens qui doivent afficher des itinéraires lorsque vous cliquez dessus. La barre latérale peut être ouverte en cliquant sur un bouton, ce qui met à jour une variable d'état et ajuste le nom de classe CSS de la barre latérale. Ceci provoque l'ouverture de la barre latérale/tiroir à "glisser".

Si je clique sur un lien dans la barre latérale, je peux facilement afficher un itinéraire souhaité. Cependant, je ne peux pas obtenir la route pour aussi "glisser" sur le côté lorsque la barre latérale/le tiroir s'ouvre. Il sera probablement plus facile de comprendre en regardant le code, j'ai donc inclus un lien vers une codesandbox ci-dessous:

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

Je copie fondamentalement tout le site Web du matériau-Ui (en utilisant V4, je crois), puis a ajouté l'itinéraire moi-même. J'apprécierais tout retour sur la manière de résoudre ce problème.

Answer 1

Pour cela, je pense que le composant MiniDrawer doit rendre le contenu car il est nécessairement conscient de l'espace que les composants AppBar et le tiroir occupent.

Minidrawer

Prendre et rendre un children accessoire.

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

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

App

Rendez le Outlet comme composant enfant.

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

Réveillé

Retirez la marge en excès afin qu'elle remplit la zone de contenu que le composant parent permet.

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