User layout which iterates the pages in the userroutes file only shows the sidebars and navigation bars. shows a blank page and does not show the content of the pages. the urls of the pages are correct only the content of the pages are not shown in the browser. the login function works properly.
1.User Layout.js
import React, { useRef, useEffect, useState } from 'react';
import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
import PerfectScrollbar from 'react-perfect-scrollbar';
import 'react-perfect-scrollbar/dist/css/styles.css';
import { makeStyles } from '@material-ui/core/styles';
import Navbar from '../../../components/Dashboard/Navbar/Navbar';
import Footer from '../../../components/Dashboard/Footer/Footer';
import Sidebar from '../../../components/Dashboard/Sidebar/Sidebar';
import routes from '../Routes/UserRoutes';
import styles from '../../../components/Dashboard/Styles/AdminStyle';
import bgImage from '../../../components/Dashboard/Images/two.jpg';
import logo from '../../../components/Dashboard/Images/one.jpg';
const useStyles = makeStyles(styles);
export default function User({ ...rest }) {
const classes = useStyles();
const mainPanel = useRef(null);
const location = useLocation();
const [image, setImage] = useState(bgImage);
const [color, setColor] = useState('blue');
const [mobileOpen, setMobileOpen] = useState(false);
const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};
useEffect(() => {
if (mainPanel.current) {
mainPanel.current.scrollTop = 0;
}
}, [location]);
const getRoutes = (routes) => {
return routes.map((prop, key) => {
if (prop.layout === '/user') {
return (
<Route
path={prop.layout + prop.path}
element={prop.Element}
key={key}
/>
);
}
return null;
});
};
return (
<div className={classes.wrapper}>
<Sidebar
routes={routes}
logoText="User"
logo={logo}
image={image}
handleDrawerToggle={handleDrawerToggle}
open={mobileOpen}
color={color}
{...rest}
/>
<div className={classes.mainPanel} ref={mainPanel}>
<Navbar routes={routes} handleDrawerToggle={handleDrawerToggle} {...rest} />
<PerfectScrollbar>
<div className={classes.content}>
<div className={classes.container}>
<Routes>
{getRoutes(routes)}
<Route path="/user" element={<Navigate to="/user/dashboard" replace />} />
</Routes>
</div>
</div>
<Footer />
</PerfectScrollbar>
</div>
</div>
);
}
2.Userroutes.js
import Dashboard from "@material-ui/icons/Dashboard";
import DashboardPage from "../Dashboard.js";
import LendRequests from "../LendRequests.js";
import LoanRequests from "../LoanRequests.js";
const UserRoutes = [
{
component: DashboardPage,
path: "/dashboard",
name: "Dashboard",
icon: Dashboard,
layout: "/user",
},
{
component: LendRequests,
path: "/lendrequests",
name: "Lend Requests",
icon: Dashboard, // You can use a different icon here if needed
layout: "/user",
},
{
component: LoanRequests,
path: "/loanrequests",
name: "Loan Requests",
icon: Dashboard, // You can use a different icon here if needed
layout: "/user",
},
];
export default UserRoutes;
3.app.js
import React from 'react';
import { Routes, Route, Router } from 'react-router-dom';
import Signin from './containers/Users/SignInUser';
import MainLandingPage from './containers/Users/MainLandingPage';
import SignUp from './containers/Users/Signup';
import PrivateRoute from './components/HOC/PrivateRoute';
import User from './containers/Users/Layout/User';
import LendRequests from './containers/Users/LendRequests';
import Dashboard from './containers/Users/Dashboard';
import LoanRequests from './containers/Users/LoanRequests';
// import Routes from './containers/Users/Routes/';
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<MainLandingPage />} />
<Route path="/login" element={<Signin />} />
<Route path="/register" element={<SignUp />} />
<Route path="/user/*" element={<PrivateRoute />}>
<Route path="*" element={<User />} />
</Route>
{/* * <Route element={<User />} path="/user" >
<Route element={<Dashboard/>} path="/user/dashboard" />
<Route element={<LoanRequests/>} path="/user/loanrequests" />
<Route element={<LendRequests/>} path="/user/lendrequests" />
</Route>
*/}
</Routes>
</div>
);
}
export default App;
4.privaterout.js:
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
const PrivateRoute = () => {
const isAuthenticated = localStorage.getItem('isAuthenticated') === 'true'; // Check if user is authenticated
return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
};
export default PrivateRoute;
5.sidebar.js
/*eslint-disable*/
import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
import { NavLink, useLocation } from "react-router-dom";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import Hidden from "@material-ui/core/Hidden";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Icon from "@material-ui/core/Icon";
// core components
import NavbarLinks from "../Navbar/NavbarLinks.js";
//*import RTLNavbarLinks from "../Navbars/RTLNavbarLinks.js";
import styles from "../Styles/SidebarStyle.js";
const useStyles = makeStyles(styles);
export default function Sidebar(props) {
const classes = useStyles();
let location = useLocation();
// verifies if routeName is the one active (in browser input)
function activeRoute(routeName) {
return location.pathname === routeName;
}
const { color, logo, image, logoText, routes } = props;
var links = (
<List className={classes.list}>
{routes.map((prop, key) => {
if (prop.display == false){
return <></>
}
var activePro = " ";
var listItemClasses;
if (prop.path === "/upgrade-to-pro") {
activePro = classes.activePro + " ";
listItemClasses = classNames({
[" " + classes[color]]: true,
});
} else {
listItemClasses = classNames({
[" " + classes[color]]: activeRoute(prop.layout + prop.path),
});
}
const whiteFontClasses = classNames({
[" " + classes.whiteFont]: activeRoute(prop.layout + prop.path),
});
return (
<NavLink
to={prop.layout + prop.path}
className={activePro + classes.item}
activeclassname="active"
key={key}
>
<ListItem button className={classes.itemLink + listItemClasses}>
{typeof prop.icon === "string" ? (
<Icon
className={classNames(classes.itemIcon, whiteFontClasses, {
[classes.itemIconRTL]: props.rtlActive,
})}
>
{prop.icon}
</Icon>
) : (
<prop.icon
className={classNames(classes.itemIcon, whiteFontClasses, {
[classes.itemIconRTL]: props.rtlActive,
})}
/>
)}
<ListItemText
primary={props.rtlActive ? prop.rtlName : prop.name}
className={classNames(classes.itemText, whiteFontClasses, {
[classes.itemTextRTL]: props.rtlActive,
})}
disableTypography={true}
/>
</ListItem>
</NavLink>
);
})}
</List>
);
var brand = (
<div className={classes.logo}>
<a
href="./"
className={classNames(classes.logoLink, {
[classes.logoLinkRTL]: props.rtlActive,
})}
target="_blank"
>
<div className={classes.logoImage}>
<img src={logo} alt="logo" className={classes.img} />
</div>
{logoText}
</a>
</div>
);
return (
<div>
<Hidden mdUp implementation="css">
<Drawer
variant="temporary"
anchor={props.rtlActive ? "left" : "right"}
open={props.open}
classes={{
paper: classNames(classes.drawerPaper, {
[classes.drawerPaperRTL]: props.rtlActive,
}),
}}
onClose={props.handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{brand}
<div className={classes.sidebarWrapper}>
{props.rtlActive ? <RTLNavbarLinks /> : <NavbarLinks />}
{links}
</div>
{image !== undefined ? (
<div
className={classes.background}
style={{ backgroundImage: "url(" + image + ")" }}
/>
) : null}
</Drawer>
</Hidden>
<Hidden smDown implementation="css">
<Drawer
anchor={props.rtlActive ? "right" : "left"}
variant="permanent"
open
classes={{
paper: classNames(classes.drawerPaper, {
[classes.drawerPaperRTL]: props.rtlActive,
}),
}}
>
{brand}
<div className={classes.sidebarWrapper}>{links}</div>
{image !== undefined ? (
<div
className={classes.background}
style={{ backgroundImage: "url(" + image + ")" }}
/>
) : null}
</Drawer>
</Hidden>
</div>
);
}
Sidebar.propTypes = {
rtlActive: PropTypes.bool,
handleDrawerToggle: PropTypes.func,
bgColor: PropTypes.oneOf(["purple", "blue", "green", "orange", "red"]),
logo: PropTypes.string,
image: PropTypes.string,
logoText: PropTypes.string,
routes: PropTypes.arrayOf(PropTypes.object),
open: PropTypes.bool,
};
I want t use the side bar to switch between protected route pages of user. but the content of the pages are not shown.
Tried several ways to fix this but failed. The problem was the React version. Downgraded from the newer version to the previous version (Last version that allowed to use Switch) and it worked fine.