listitem onclick material ui giving an error-CodePudding

Hi I am trying to write navigation list like below.

Codepen Link: https://9huof.csb.app/ https://codesandbox.io/s/nervous-water-9huof?file=/src/index.js

 const NavList = () => {
 const history = useHistory();
 return (
   <div>
    <ListItem button onClick={() => history.push("/reports")}>
     <ListItemIcon>
       <DashboardIcon />
     </ListItemIcon>
     <ListItemText primary='Reports' />
   </ListItem>
   <ListItem button onClick={() => history.push("/quiz")}>
     <ListItemIcon>
       <PeopleIcon />
     </ListItemIcon>
     <ListItemText primary='Quiz' />
   </ListItem>
  </div>
 );
};

Where ListItem called inside List from the functional component like below.

 <Drawer variant='permanent' open={open}>
      <Toolbar
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "flex-end",
          px: [1],
        }}
      >
        <IconButton onClick={toggleDrawer}>
          <ChevronLeftIcon />
        </IconButton>
      </Toolbar>
      <Divider />
      <List>
        <NavList />
      </List>
    </Drawer>

When I click on quiz it says "Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:"

CodePudding user response：

The problem is with the render props of your Route components. Use an inline function as seen here. So you need to change your Routes from this:

<AuthRoute path="/quiz" render={Quiz} />

to this:

<AuthRoute path="/quiz" render={() => <Quiz />} />

CodePudding user response：

Instead of render in your route change the prop to component like so

<AuthRoute path="/quiz" component={Quiz} />