错误消息“内部错误：TypeError：无法解构‘react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)’的属性‘future’，因为它为空。”

Question

我面临这个错误

Internal error: TypeError: Cannot destructure property 'future' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.

后面是来自特定 node_modules 文件的一长串行，它们看起来都像这样：

\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:50095

列表中的前两行除外：

at useResolvedPath (./node_modules/react-router/dist/index.js:361:5)

at NavLinkWithRef (./node_modules/react-router-dom/dist/index.js:903:75)

也许值得一提的是，我目前正在尝试将我的 React 应用程序迁移到 Next.js，并且在我朝该方向执行所有必要步骤后出现此错误。

我猜这可能与我的导航栏有关（在 next.js 之前工作正常），所以这里也是它的代码，以防万一：

'use client';

import React, { useState, useEffect } from 'react';
import {
    Nav,
    NavLink,
    Bars,
    CloseIcon,
    IconWrapper,
    NavMenu,
} from './navbarElements';
import Image from 'next/image';

const Navbar = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [isMobile, setIsMobile] = useState(false); // Initialize as false

    const toggleMenu = () => {
        setIsOpen(!isOpen);
    }

    const closeMenu = () => {
        setIsOpen(false);
    }

    useEffect(() => {
        const handleResize = () => {
            const isCurrentlyMobile = typeof window !== 'undefined' && window.innerWidth < 769;
            if (!isCurrentlyMobile) {
                setIsOpen(false);
            }
            setIsMobile(isCurrentlyMobile);
        };

        // Initial check
        handleResize();

        // Add resize event listener
        window.addEventListener('resize', handleResize);

        // Clean up the listener on component unmount
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    return (
        <Nav>
            <NavLink to="/">
                <Image src="../public/logo.png" alt="" className="navbar-logo" />
            </NavLink>
            
            <IconWrapper onClick={toggleMenu}>
                <Bars isOpen={isOpen} />
                <CloseIcon isOpen={isOpen} />
            </IconWrapper>
            <NavMenu className={isOpen ? 'active' : ''} isMobile={isMobile}>
                <NavLink to="/produse" activeStyle onClick={closeMenu}>
                    Produse
                </NavLink>
                <NavLink to="/aboutus" activeStyle onClick={closeMenu}>
                    Despre noi
                </NavLink>
                <NavLink to="/portofolio" activeStyle onClick={closeMenu}>
                    Portofoliu
                </NavLink>
                <NavLink to="/contact" activeStyle onClick={closeMenu}>
                    Contact
                </NavLink>
            </NavMenu>
        </Nav>
    );
};

export default Navbar;

这是 App.js 内容：

import React from "react";
import '../App.css';
import Navbar from './navbar';
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from 'react-router-dom';
import Home from "./pages/home";
import Produse from "./pages/produse"
import About from "./pages/aboutus";
import Contact from "./pages/contact";
import Portofolio from "./pages/portofolio";
import ScrollToTopButton from "./scrollToTop";
import Footer from "./footer";

function App() {
  return (
    <Router>
            <Routes>
            <Navbar />
                <Route path="/" element={<Home />} />
                <Route path="/produse" element={<Produse />} />
                <Route path="/aboutus" element={<About />} />
                <Route path="/contact" element={<Contact />} />
                <Route path="/portofolio" element={<Portofolio />} />
            </Routes>
        <ScrollToTopButton />
        <Footer />
    </Router>
  );
 
}

export default App;

有什么想法吗？

我还尝试了

npm update

并删除node_modules和package-lock.json。

Answer 1

看起来您正在 NextJS 上使用react-router-dom，其中 nextjs 是为服务器端路由构建的。如果您在 NextJS 中使用基于应用程序的路由器，路由将如下（根据您的 app.js 内容）。

app/
├── contact/
│   ├── page.js
├── portfolio/
│   ├── page.js
├── produse/
│   ├── page.js
├── page.js

当你从react路由切换到next路由时，这是一个很大的话题。请查看官方文档链接了解更多详情