Блог

Я создал этот контент с помощью кода MaterialUI (https://material-ui.com/components/drawers /). Я также попытался изменить его для реализации некоторых маршрутизаторов. Идея в том, что некоторые кнопки на боковой панели изменят содержимое. Вот код, который я использую:

 export default function Main(props) {
  const { window } = props;
  const classes = useStyles();
  const theme = useTheme();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen)
  }

  const drawer = (
    <div>
        <div className={classes.toolbar} />
        <Divider />
        <List>
            <Link to='/'>
                <ListItem button>
                    <ListItemIcon><HomeIcon /></ListItemIcon>
                    <ListItemText primary="Home" />
                </ListItem>
            </Link>
            <ListItem button>
                <ListItemIcon><GamesIcon /></ListItemIcon>
                <ListItemText primary="Play Game" />
            </ListItem>
            <ListItem button>
                <ListItemIcon><AddBoxIcon /></ListItemIcon>
                <ListItemText primary="Create Game" />
            </ListItem>
            <Link to='/add_question'>
                <ListItem button>
                    <ListItemIcon><AddBoxIcon /></ListItemIcon>
                    <ListItemText primary="Add Questions" />
                </ListItem>
            </Link>
            <ListItem button>
                <ListItemIcon><AddBoxIcon /></ListItemIcon>
                <ListItemText primary="Add Question Categories" />
            </ListItem>
            <ListItem button>
                <ListItemIcon><AddBoxIcon /></ListItemIcon>
                <ListItemText primary="Add Participants" />
            </ListItem>
        </List>
    </div>
  );

  const container = window !== undefined ? () => window().document.body : undefined;

  return (
    <Router>
        <div className={classes.root}>
            <CssBaseline />
            <AppBar position="fixed" className={classes.appBar}>
                <Toolbar>
                    <IconButton
                        color="inherit"
                        aria-label="open drawer"
                        edge="start"
                        onClick={handleDrawerToggle}
                        className={classes.menuButton}
                    >
                        <MenuIcon />
                    </IconButton>
                <Typography variant="h3" noWrap>
                    Trivia Game
                </Typography>
            </Toolbar>
        </AppBar>
            <nav className={classes.drawer} aria-label="mailbox folders">
            {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
                <Hidden smUp implementation="css">
                    <Drawer
                        container={container}
                        variant="temporary"
                        anchor={theme.direction === 'rtl' ? 'right' : 'left'}
                        open={mobileOpen}
                        onClose={handleDrawerToggle}
                        classes={{
                            paper: classes.drawerPaper,
                        }}
                        ModalProps={{
                            keepMounted: true, // Better open performance on mobile.
                        }}
                    >
                        {drawer}
                    </Drawer>
                </Hidden>
                <Hidden xsDown implementation="css">
                    <Drawer
                        classes={{
                            paper: classes.drawerPaper,
                        }}
                        variant="permanent"
                        open
                    >
                        {drawer}
                    </Drawer>
                </Hidden>
            </nav>
            <main className={classes.content}>
                <div className={classes.toolbar} />
                <Switch>
                    <Route path='/'>
                        <CreateCategories />
                    </Route>
                    <Route path='/add_question'>
                        <CreateQuestions />
                    </Route>
                </Switch>
            </main>
        </div>
    </Router>
  );
}
  

Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю кнопки со ссылкой, содержимое не меняется. При загрузке содержимого отображается содержимое, на которое ссылается / , но я не могу изменить его при нажатии кнопок. Как вы можете видеть, у меня есть две ссылки прямо сейчас, но, как я уже упоминал, они не переключаются.

Также в качестве дополнительного вопроса, могу ли я использовать эти маршрутизаторы для полной замены содержимого на странице? Все примеры, которые я видел, требуют, чтобы у вас была какая-то навигация, но что, если я захочу перейти на другую страницу с другой навигацией?

Вы пробовали с

 withRouter(Component);
  

Я исправил свою проблему с этим.

вместо этого вы можете попробовать использовать встроенную перехват useHistory или history API HTML5. Это один из вариантов для вас.

history.pushState

history.replaceState

Это была проблема: способ работы маршрутизатора React заключается в том, что, когда маршруты находятся внутри коммутатора, он будет отображаться всякий раз, когда путь, который вы связываете, совпадает с маршрутом. Так, например, я хотел перейти к /add_question , но поскольку мой первый маршрут имеет a / , а /add_question также имеет a / , он немедленно соответствует ему. Есть два способа исправить это: либо вы помещаете / маршрут последним в свой коммутатор, либо используете слово exact в своем маршруте, чтобы / маршрут отображался только в том случае, если путь указан точно / .

             <Switch>
                <Route path='/' exact>
                    <CreateCategories />
                </Route>
                <Route path='/add_question'>
                    <CreateQuestions />
                </Route>
            </Switch>