How to display a common component for all routes in react - reactjs

Question

I am new to react js and i'm trying to create a dashboard layout where i want to render a sidebar(which will be common in all the routes) and based upon the click event of sidebar items i want to render different component. Although i have achieved this, but in first instance the sidebar is present with the loaded component but once i refresh the page, only the newly loaded component remains on the page and sidebar is vanished.
//This is my main page code;
import React, { Component } from 'react';
import './Dashboard.css'
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import Sidebar from "../SideBar/Sidebar";
import Charts from "../Charts/Charts";
import About from "../About/About"
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
class Dashboard extends Component {
constructor(props) {
super(props)
}
render() {
// this.state.aboutComponent = this.props.aboutComponent;
return (
<Router>
<div>
<Sidebar></Sidebar>
<Switch>
<Route exact path={"/"} component={Charts} />
<Route exact path={"/about"} component={About} />
</Switch>
<Footer></Footer>
</div>
</Router>
)
}
}
export default Dashboard
import React from 'react';
import clsx from 'clsx';
import './Sidebar.css';
import { makeStyles, useTheme } 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 Divider from '#material-ui/core/Divider';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
import DeleteIcon from '#material-ui/icons/Delete';
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 InboxIcon from '#material-ui/icons/MoveToInbox';
import MailIcon from '#material-ui/icons/Mail';
import Button from '#material-ui/core/Button';
import Menu from '#material-ui/core/Menu';
import MenuItem from '#material-ui/core/MenuItem';
import InfoIcon from '#material-ui/icons/Info';
import About from '../About/About';
// import { Link } from "react-router-dom";
import { useHistory } from "react-router-dom";
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
link: {
textDecoration: 'none',
color: theme.palette.text.primary
},
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: {
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(7) + 1,
[theme.breakpoints.up('sm')]: {
width: theme.spacing(9) + 1,
},
},
toolbar: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
}));
export default function Sidebar() {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = React.useState(false);
const [component, setComponent] = React.useState('user')
const [anchorEl, setAnchorEl] = React.useState(null);
const history = useHistory();
const handleDrawerOpen = () => {
setOpen(true);
};
const handleDrawerClose = () => {
setOpen(false);
};
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
// <Router>
<div className={classes.root}>
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar>
<h1>SGGB</h1>
<div className="alignment">
<Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
<h4>Menu</h4>
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
</div>
</Toolbar>
</AppBar>
<Drawer
variant="permanent"
className={clsx(classes.drawer, {
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
})}
classes={{
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
}),
}}
>
<List>
<ListItem>
<IconButton
className={clsx(classes.menuButton, {
[classes.hide]: !open,
})}
onClick={handleDrawerClose}>
{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
</IconButton>
</ListItem>
<ListItem>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
className={clsx(classes.menuButton, {
[classes.hide]: open,
})}
>
<MenuIcon />
</IconButton>
</ListItem>
<Link to="/about" className={classes.link}>
<ListItem button key="about" >
<ListItemIcon>{<InfoIcon />}</ListItemIcon>
<ListItemText primary="About" />
</ListItem>
</Link>
</List>
</Drawer>
</div >
// </Router>
);
}
I have also referred to this post;
React Router display one component for all routes ( a header)

Answer 1

You have to put the Route component inside a Switch component like this :
<Router>
<div>
<Sidebar></Sidebar>
<Switch>
<Route exact path={"/"} component={Charts} />
<Route exact path={"/about"} component={About} />
</Switch>
<Footer></Footer>
</div>
</Router>