J'essaie de transmettre un slug à un composant d'en-tête sans avoir à inclure l'en-tête à chaque sous-composant.

Mon code ressemble à ceci:

slug: "game"

Ce que je veux, c'est que le composant Header sache quel slug a été choisi dans l'une des routes du Switch.

Est-il possible de le faire avec, par exemple, le routage imbriqué?

Meilleur Cordialement, Patrick

Edit:

Ceci est mon composant Header btw:

const Header = (props) => {
  console.log(props.match.params)

Je veux donner la possibilité aux liens pour inclure la limace. Par exemple, href = / game doit être href =: slug / game alors.

Et sachez que l'en-tête est chargé avant le changement.

Edit2:

Au moins ceci:

        <Grid item>
          <Route path={["/:slug", "*"]} component={Header} />
        </Grid>

me donnera accès à l'emplacement où se trouve le slug. Mais cela ne semble pas être le moyen le plus propre. De plus, match.params ne contient pas le slug, même avec l'exportation withRouter . Pourquoi?

Ma solution jusqu'à ce que je sache mieux (ne fonctionne pas)

const Header = (props) => {
  const { location } = props;
  let pathname = location.pathname
  let slug = pathname.split("/")
  console.log(slug[1]);

....


export default withRouter(Header);

Cela entraînera la confusion de l'URL après quelques clics, la localisation sera concaténé encore et encore des URLs résultantes comme /myslug,game,player,...

Solution finale

Eh bien, j'ai obtenu la solution finale ci-dessous qui est: p >

Enveloppez l'en-tête à son emplacement spécifique dans Route

const Header = (props) => {
  const {match, location, history} = props
  console.log(match)
  console.log(location)
  console.log(history)

....

export default withRouter(Header);

Accédez ensuite à props.match.params dans le composant Header:

const Header = (props) => {
  console.log(props.match.params.slug)
  const classes = useStyles();
  const [open, setOpen] = useState();

  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  return (
    <div className={classes.root}>
      <AppBar
        position="static"
        className={clsx(classes.appBar, { [classes.appBarShift]: open })}
      >
        <Toolbar>
          <IconButton
            aria-label="open drawer"
            onClick={handleDrawerOpen}
            edge="start"
            className={clsx(classes.menuButton, open && classes.hide)}
          >
            <MenuIcon />
          </IconButton>
          <Typography>Placeholder Banner</Typography>
        </Toolbar>
      </AppBar>
      <Drawer
        variant="persistent"
        anchor="left"
        open={open}
        className={classes.drawer}
        classes={{ paper: classes.drawerPaper }}
      >
        <div className={classes.drawerHeader}>
          <IconButton onClick={handleDrawerClose}>
            <CloseIcon />
          </IconButton>
        </div>
        <Divider />
        <List>
          <ListItem component="a" href="/" button key="start">
            <ListItemIcon>
              <HomeIcon fontSize="large" />
            </ListItemIcon>
            <ListItemText>Start</ListItemText>
          </ListItem>
          <ListItem component="a" href="/game" button key="game">
            <ListItemIcon>
              <SportsEsportsIcon fontSize="large" />
            </ListItemIcon>
            <ListItemText>Game Setup</ListItemText>
          </ListItem>
          <ListItem component="a" href="/player" button key="player">
            <ListItemIcon>
              <PersonIcon fontSize="large" />
            </ListItemIcon>
            <ListItemText>Player Setup</ListItemText>
          </ListItem>
          <ListItem component="a" href="/settings" button key="settings">
            <ListItemIcon>
              <SettingsIcon fontSize="large" />
            </ListItemIcon>
            <ListItemText>Settings</ListItemText>
          </ListItem>
          <ListItem component="a" href="/credits" button key="credits">
            <ListItemIcon>
              <InfoIcon fontSize="large" />
            </ListItemIcon>
            <ListItemText>Credits</ListItemText>
          </ListItem>
        </List>
      </Drawer>
    </div>
  );
};

export default Header;