reactjs React错误：无法读取null的属性(阅读“useContext”)

svmlkihl 于 2023-06-22 发布在 React

关注(0)|答案(1)|浏览(559)

有人能帮帮我吗。我刚刚学习react，当我开始实现我的Navbar组件并添加一些matial-ui元素时，我遇到了这个错误。
错误：

Unexpected Application Error!
Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (http://localhost:3000/static/js/bundle.js:58534:25)
    at useTheme (http://localhost:3000/static/js/bundle.js:53459:59)
    at useTheme (http://localhost:3000/static/js/bundle.js:53369:77)
    at useThemeProps (http://localhost:3000/static/js/bundle.js:53424:68)
    at useThemeProps (http://localhost:3000/static/js/bundle.js:50503:65)
    at SvgIcon (http://localhost:3000/static/js/bundle.js:49311:82)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:25325:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:27896:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:29943:20)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:34870:18)

这是我的代码
Apps.js

App.js without the imports

const Layout = () =>{
  return(
    <div className="app">
        <Navbar/>
        <Outlet/>
        <Footer/>
        footer
    </div>
  )
}
const router = createBrowserRouter([
  {
    path:"/",
    element: <Layout/>,
    children:[
      {
        path:"/",
        element: <Home/>
      },
    ]
  },
]);

function App() {
  return (
    <div className="App">
       <RouterProvider router={router} />
    </div>
  );
}
export default App;

没有导入的Navbar.jsx

<div className='left'>
           <div className="item">
                <MenuOutlinedIcon/>
           </div>
           <div className="item">
                <Link to= "/">Blog</Link>
           </div>
        </div>
  </div>

reactjs

来源：https://stackoverflow.com/questions/76492910/react-error-cannot-read-properties-of-null-reading-usecontext

1条答案

按热度按时间

6ie5vjzr1#

这是我的整个导航栏组件。

import React from 'react'
import SearchIcon from '@mui/icons-material/Search';
import FavoriteBorderOutlinedIcon from '@mui/icons-material/FavoriteBorderOutlined';
import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined';
import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';
import {Link} from "react-router-dom";
const Navbar = () => {
  return (
    <div className='navbar'>
      <div className='wrapper'>
        <div className='left'>
           <div className="item">
                <MenuOutlinedIcon/>
           </div>
           <div className="item">
                <Link to= "/">Blog</Link>
           </div>
        </div>
      </div>
      
    </div>
  )
}

export default Navbar

赞(0）回复(0）举报 2023-06-22

我来回答

reactjs React错误：无法读取null的属性(阅读“useContext”)

1条答案

相关问题

热门标签

最新问答