компонент не рендерит страницу при нажатии на MenuItem. Рендерится только если страница обновлена - PullRequest
Новая
       17

компонент не рендерит страницу при нажатии на MenuItem. Рендерится только если страница обновлена

0 голосов
/ 12 июля 2019

Я использую отзывчивый ящик из Material-ui, и у меня есть MenuItems, которые ссылаются на разные страницы, аналогично тому, как это показано в документах.Однако, когда я нажимаю на один из этих пунктов меню, я вижу изменение URL, но страница не отображает компонент, пока я не нажму кнопку Обновить на странице.Ценю любую помощь.

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

  function handleDrawerToggle() {
    setMobileOpen(!mobileOpen);
  }

  const drawer = (
    <div>
        <div className={classes.toolbar} />
        <Divider />
        <MenuList>
            <Router>
                <MenuItem component={Link} to='/'> Dashboard </MenuItem>
                <MenuItem component={Link} to='/inventory'> Inventory </MenuItem>
                <MenuItem component={Link} to='/invoice'> Invoice </MenuItem>
                <MenuItem component={Link} to='/shipments'> Shipments </MenuItem>
                <MenuItem component={Link} to='/outbound'> Outbound </MenuItem>
                <MenuItem component={Link} to='/clinicalSamples'> Clinical Samples </MenuItem>
            </Router>
        </MenuList>
    </div>
  );

  return (
    <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="h6" noWrap>
            Inventory Management
          </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"
            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} />
            {children}
      </main>
    </div>
  );
}

I then call it in app.js like this:

render() {
    return (
    <React.Fragment>
     <div>
       <Router>
        <Drawer>
         <Switch>
           <Route path='/login' component={Login} exact/>
           <Route path='/' component={Home} exact />
           <Route path='/dashboard' component={Home} exact/>
           <Route path='/inventory' component={Inventory} exact />
           <Route path='/invoice' component={Invoice} exact />
           <Route path='/shipments' component={Shipments} exact />
           <Route path='/outbound' component={Outbound} exact />
           <Route component={Error} />
         </Switch>
        </Drawer>
       </Router>

     </div>
     </React.Fragment>
...