How to active side menu in react js - reactjs

Question

How to active side menu in react application. I am using ListItem for display side menu in my application. But in side menu when I click on ListItem then it will redirect to new page. So How can I selected or active side menu. I tried to active using state but page is redirect to another page. So state will not work.
//import React from "react";
import React, { Component, Fragment } from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import { withStyles } from "#material-ui/core/styles";
import Drawer from "#material-ui/core/Drawer";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import List from "#material-ui/core/List";
import CssBaseline from "#material-ui/core/CssBaseline";
import Typography from "#material-ui/core/Typography";
import Divider from "#material-ui/core/Divider";
import IconButton from "#material-ui/core/IconButton";
import MenuIcon from "#material-ui/icons/Menu";
import ChevronLeftIcon from "#material-ui/icons/ChevronLeft";
import ChevronRightIcon from "#material-ui/icons/ChevronRight";
import ListItem from "#material-ui/core/ListItem";
import ListItemIcon from "#material-ui/core/ListItemIcon";
import ListItemText from "#material-ui/core/ListItemText";
import { Link } from "./Router";
import TimerIcon from "#material-ui/icons/Timer";
import AssignmentIcon from "#material-ui/icons/Assignment";
import ReportIcon from "#material-ui/icons/Report";
import TimelineIcon from "#material-ui/icons/Timeline";
import TodoIcon from "#material-ui/icons/PlayCircleFilledWhite";
const drawerWidth = 240;
const styles = theme => ({
root: {
display: "flex"
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
menuButton: {
marginLeft: 12,
marginRight: 36
},
hide: {
display: "none"
},
drawer: {
width: drawerWidth,
flexShrink: 0,
whiteSpace: "nowrap"
},
drawerOpen: {
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
drawerClose: {
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
overflowX: "hidden",
width: theme.spacing.unit * 7 + 1,
[theme.breakpoints.up("sm")]: {
width: theme.spacing.unit * 9 + 1
}
},
toolbar: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "0 8px",
...theme.mixins.toolbar
},
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3
}
});
class MiniDrawer extends React.Component {
state = {
open: false,
selectedIndex: 0
};
handleDrawerOpen = () => {
this.setState({ open: true });
};
handleDrawerClose = () => {
this.setState({ open: false });
};
render() {
const { classes, theme } = this.props;
return (
<Fragment>
<CssBaseline />
<AppBar
position="fixed"
className={classNames(classes.appBar, {
[classes.appBarShift]: this.state.open
})}
>
<Toolbar disableGutters={!this.state.open}>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerOpen}
className={classNames(classes.menuButton, {
[classes.hide]: this.state.open
})}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" noWrap>
Initio Technologies
</Typography>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
className={classNames(classes.drawer, {
[classes.drawerOpen]: this.state.open,
[classes.drawerClose]: !this.state.open
})}
classes={{
paper: classNames({
[classes.drawerOpen]: this.state.open,
[classes.drawerClose]: !this.state.open
})
}}
open={this.state.open}
>
<div className={classes.toolbar}>
<IconButton onClick={this.handleDrawerClose}>
{theme.direction === "rtl" ? (
<ChevronRightIcon />
) : (
<ChevronLeftIcon />
)}
</IconButton>
</div>
<Divider />
<List>
<ListItem
button
key="Time Tracker"
component={Link}
to="/timetracker"
>
<ListItemIcon>
<TimerIcon />
</ListItemIcon>
<ListItemText primary="Time Tracker" />
</ListItem>
<ListItem
button
key="Project"
component={Link}
to="/project"
>
<ListItemIcon>
<AssignmentIcon />
</ListItemIcon>
<ListItemText primary="Project" />
</ListItem>
<ListItem button key="Kanban" component={Link} to="/kanban">
<ListItemIcon>
<TimelineIcon />
</ListItemIcon>
<ListItemText primary="Kanban" />
</ListItem>
<ListItem
button
key="Todo"
component={Link}
to="/todo"
>
<ListItemIcon>
<TodoIcon />
</ListItemIcon>
<ListItemText primary="Todo" />
</ListItem>
<ListItem button key="Reports" component={Link} to="/reports">
<ListItemIcon>
<ReportIcon />
</ListItemIcon>
<ListItemText primary="Reports" />
</ListItem>
</List>
<Divider />
</Drawer>
</Fragment>
);
}
}
MiniDrawer.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired
};
export default withStyles(styles, { withTheme: true })(MiniDrawer);
Anyone please suggest me a solution.
Thanks

Answer 1

There are two ways to what I can think:
Have a Wrapper Component something like this:
const Wrapper = () => (
<React.Fragment>
<Sidebar />
<Content />
</React.Fragment>
)
In Content you can use route based rendering to switch the content. And thus manage state in sidebar.
Get the location of where your app is and setting the active item using this key.
You can use react-router to handle routing.
Hope this helps!