react/mui: question: For some reason getting the following error from link. How do I fix this? note: "/" is in app routes and wrapped around browserouter. Only link part cause error on page it seems. Without it it works fines ////////////sidebar.js///////////// import { Box, IconButton, Typography, useTheme } from "@mui/material"; import React from 'react'; import { useState } from 'react'; import{ ProSidebar, Menu, MenuItem} from 'react-pro-sidebar'; import "react-pro-sidebar/dist/css/styles.css"; import { Link } from "react-router-dom"; import { tokens } from '../../theme'; import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined'; import PeopleAltOutlinedIcon from '@mui/icons-material/PeopleAltOutlined'; import ReceiptLongOutlinedIcon from '@mui/icons-material/ReceiptLongOutlined'; import CalendarMonthOutlinedIcon from '@mui/icons-material/CalendarMonthOutlined'; import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined'; import BarChartOutlinedIcon from '@mui/icons-material/BarChartOutlined'; import PieChartOutlineOutlinedIcon from '@mui/icons-material/PieChartOutlineOutlined'; import ViewTimelineOutlinedIcon from '@mui/icons-material/ViewTimelineOutlined'; import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined'; import MapOutlinedIcon from '@mui/icons-material/MapOutlined'; import LightModeOutlined from "@mui/icons-material/LightModeOutlined"; import ContactPageOutlinedIcon from '@mui/icons-material/ContactPageOutlined'; // Item component const Item = ( { title , to, icon, selected , setSelected}) =>{ const theme = useTheme(); const colors = tokens(theme.palette.mode); return( setSelected(title)} icon={icon} > {title} ) } function Sidebar() { const theme = useTheme(); const colors = tokens(theme.palette.mode); const [isClosed, setIsClosed] = useState(false); const [selected, setSelected] = useState("Dashboard") return ( setIsClosed(!isClosed)} icon={isClosed ? : undefined} style={{ margin: "10px 0 20px 0", color: colors.grey[100], }} > {!isClosed && ( Admin setIsClosed(!isClosed)}> )} {!isClosed && ( {/* {user profile } */} Sleeping cat SC Admin )} {/*Menu options */} } selected={selected} setSelected={setSelected} /> ) } export default Sidebar.

1. react/mui:
question: For some reason getting the following error from link. How do I fix this?
note: "/" is in app routes and wrapped around browserouter. Only link part cause error on page it
seems. Without it it works fines
////////////sidebar.js/////////////
import { Box, IconButton, Typography, useTheme } from "@mui/material";
import React from 'react';
import { useState } from 'react';
import{ ProSidebar, Menu, MenuItem} from 'react-pro-sidebar';
import "react-pro-sidebar/dist/css/styles.css";
import { Link } from "react-router-dom";
import { tokens } from '../../theme';
import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
import PeopleAltOutlinedIcon from '@mui/icons-material/PeopleAltOutlined';
import ReceiptLongOutlinedIcon from '@mui/icons-material/ReceiptLongOutlined';
import CalendarMonthOutlinedIcon from '@mui/icons-material/CalendarMonthOutlined';
import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
import BarChartOutlinedIcon from '@mui/icons-material/BarChartOutlined';
import PieChartOutlineOutlinedIcon from '@mui/icons-material/PieChartOutlineOutlined';
import ViewTimelineOutlinedIcon from '@mui/icons-material/ViewTimelineOutlined';
import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';
import MapOutlinedIcon from '@mui/icons-material/MapOutlined';
import LightModeOutlined from "@mui/icons-material/LightModeOutlined";
import ContactPageOutlinedIcon from '@mui/icons-material/ContactPageOutlined';
// Item component
const Item = ( { title , to, icon, selected , setSelected}) =>{
const theme = useTheme();
const colors = tokens(theme.palette.mode);
return(
setSelected(title)}
icon={icon}
>

2. {title}
)
}
function Sidebar() {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const [isClosed, setIsClosed] = useState(false);
const [selected, setSelected] = useState("Dashboard")
return (
setIsClosed(!isClosed)}
icon={isClosed ? : undefined}
style={{
margin: "10px 0 20px 0",
color: colors.grey[100],
}}
>
{!isClosed && (
Admin
setIsClosed(!isClosed)}>
)}
{!isClosed && (
{/* {user profile } */}
Sleeping cat
SC Admin

3. )}
{/*Menu options */}
}
selected={selected}
setSelected={setSelected}
/>
)
}
export default Sidebar