React mui question I am passing a data into a Item Every.pdf

React mui(): question
I am passing a data into a Item. Everything works correctly except when I try to use <Link to={'/'}
/>. This cause a web package error. When I remove the link it works fine. Also / is a route. I also
tried an wrap link around MenuItem but get an link issue. I copy and paste both method errors
below.
method 1:
method 2(i tried):
My app code(dashboard is wrapped in browser):
without link:
With link:
full- error:
Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0__.useContext(...) is null
LinkWithRef index.tsx:424
React 11
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
js scheduler.development.js:571
factory react refresh:6
Webpack 24
index.tsx:424
React 11
performConcurrentWorkOnRoot self-hosted:1409
(Async: EventHandlerNonNull)
Webpack 24
React 12

Webpack 24
index.tsx:424
React 12
Webpack 24
The above error occurred in the <Link> component:
LinkWithRef@http://localhost:3000/static/js/bundle.js:54228:9 span div li
MenuItem@http://localhost:3000/static/js/bundle.js:50333:18
Item@http://localhost:3000/static/js/bundle.js:344:7 div
./node_modules/@emotion/react/dist/emotion-element-
6a883da9.browser.esm.js/withEmotionCache/<@http://localhost:3000/static/js/bundle.js:1778:66
Box@http://localhost:3000/static/js/bundle.js:9159:72 ul nav
Menu@http://localhost:3000/static/js/bundle.js:50309:18 div div div
ProSidebar@http://localhost:3000/static/js/bundle.js:50200:18 div
./node_modules/@emotion/react/dist/emotion-element-
6a883da9.browser.esm.js/withEmotionCache/<@http://localhost:3000/static/js/bundle.js:1778:66
Box@http://localhost:3000/static/js/bundle.js:9159:72
Sidebar@http://localhost:3000/static/js/bundle.js:379:74 div
InnerThemeProvider@http://localhost:3000/static/js/bundle.js:8374:70
ThemeProvider@http://localhost:3000/static/js/bundle.js:8081:7
ThemeProvider@http://localhost:3000/static/js/bundle.js:8395:7
App@http://localhost:3000/static/js/bundle.js:41:77 Consider adding an error boundary to your tree
to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more
about error boundaries. react-dom.development.js:18687
React 12
Webpack 24

React 9
Webpack 24
index.tsx:424
React 9
Webpack 24
method 2 error:
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

<Menu iconShape="square">
<MenuItem
onClick={() => setIsClosed(!isClosed)}
icon={isClosed ? <MenuOutlinedIcon /> : undefined}
style={{
margin: "10px 0 20px 0",
color: colors.grey[100],
}}
>
{!isClosed && (
<Box
display="flex"
justifyContent="space-between"
alignItems="center"
ml="15px"
>
<Typography variant="h3" color={colors.grey[100]}>
Admin
</Typography>
<IconButton onClick={() => setIsClosed(!isClosed)}>
<MenuOutlinedIcon />
</IconButton>
</Box>
)}
</MenuItem>
{!isClosed && (
<Box mb="25px">
{/* {user profile } */}
<Box display="flex" justifyContent="center" alignItems="center">
<img
alt="profile-user"
width="100px"
height="100px"
src={`../../images/user.png`}
style={{ cursor: "pointer", borderRadius: "50%", border:"solid", color: "lightgray"}}
/>
</Box>
<Box textAlign="center">
<Typography
variant="h2"
color={colors.grey[100]}
fontWeight="bold"

sx={{ m: "10px 0 0 0" }}
>
Sleeping cat
</Typography>
<Typography variant="h5" color={colors.greenAccent[500]}>
SC Admin
</Typography>
</Box>
</Box>
)}
{/*Menu options */}
{/*Menu options */}
<Box paddingLeft={isClosed ? undefined : "10%"}>
<Item
title="Dashboard"
to="/"
icon={<HomeOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
</Box>
</Menu>
</ProSidebar>
</Box>
)
}
export default Sidebar
import React from 'react'; import { ColorModeContext, useMode } from './theme'; import {
Cssbaseline, ThemeProvider } from 'Omui/material'; import {Routes, Route, BrowserRouter } from
"react-router-dom" import Topbar from './sections/global/Topbar'; import Dashboard from
'./pages/dashboard'; import Sidebar from './sections/global/Sidebar'; ) } export default App;

React mui question I am passing a data into a Item Every.pdf

Recommended

Recommended

More Related Content

Similar to React mui question I am passing a data into a Item Every.pdf

Similar to React mui question I am passing a data into a Item Every.pdf (20)

More from accostinternational

More from accostinternational (20)

Recently uploaded

Recently uploaded (20)

React mui question I am passing a data into a Item Every.pdf