未捕获的错误：要安装不变的预期应用程序路由器

Question

我在将下一个 12 中编写的旧项目迁移到下一个 13 时遇到错误。

控制台错误日志

我无法在我的代码中找出该错误的错误。我用谷歌搜索了它，但找不到任何解决方案。它没有解释我的代码的任何错误。我该如何解决？

我无法尝试任何事情，因为它没有解释我的代码的任何错误。请让我知道该错误的根源是什么。谢谢。

++++++++++ 导航.js

function useRouter() {
    const router = (0, _react).useContext(_appRouterContext.AppRouterContext);
    if (router === null) {
        throw new Error('invariant expected app router to be mounted');
    }
    return router;
}

我认为“next/navigation”包含此文件（navigation.js）

当 router 为空时抛出此错误，但我仍然不知道为什么 router 为空。

+++++++++++layout.jsx

"use client";

import { motion, AnimatePresence } from "framer-motion";
import "animate.css";
import { useRouter } from "next/navigation";
import LoadingSpinner from "../components/layout/media/LoadingSpinner";

import Users from "../class/Users.class";

import { useEffect } from "react";
import create from "zustand";

import Head from "next/head";
import Image from "next/image";

import NavBar from "../components/layout/NavBar";
import SubTransition from "../components/transition/SubTransition";
import LoginModal from "../components/layout/LoginModal";

import "../styles/betconstruct_icons.css";
import "../styles/global.css";

const useStore = create(() => ({
  isShowLoginModal: false,
  isLoading: true,
}));

//default layout
function MainLayout({ children }) {
  

  useEffect(() => {
    Users.checkToken().then((res) => {
      if (res) {
        console.log("token is valid");
      } else {
        console.log("token is invalid");
      }
      LoadingDone();
    });
    //router.events.on("routeChangeStart", (url) => {
    //  LoadingNow();
    //});
    //router.events.on("routeChangeComplete", () => LoadingDone());
    //router.events.on("routeChangeError", () => LoadingDone());

    if (router.pathname === "/") {
      document.querySelector("body").classList.add("layout-bc");
      document.querySelector("body").classList.add("theme-default");
      document.querySelector("body").classList.add("smart-panel-is-visible");
      document.querySelector("body").classList.add("betslip-Hidden");
      document.querySelector("body").classList.add("is-home-page");
    }

    if (router.pathname !== "/") {
      document.querySelector("body").classList.add("layout-bc");
      document.querySelector("body").classList.add("theme-default");
      document.querySelector("body").classList.add("smart-panel-is-visible");
      document.querySelector("body").classList.add("betslip-Hidden");
      document.querySelector("body").classList.add("is-home-page");
    }
  }, []);

  const animate = {
    initial: {
      opacity: 0,
      transition: `transform 0.24s ease`,
    },
    animate: {
      opacity: 1,
      transition: `transform 0.24s ease`,
    },
    exit: {
      opacity: 0,
      transition: `transform 0.24s ease`,
    },
  };

  const animateFlyIn = {
    initial: {
      opacity: 0,
      x: 100,
      transition: `transform 0.24s ease`,
    },
    animate: {
      opacity: 1,
      x: 0,
      transition: `transform 0.24s ease`,
    },
    exit: {
      opacity: 0,
      x: 100,
      transition: `transform 0.24s ease`,
    },
  };

  const { isShowLoginModal, isLoading } = useStore();
  const openLoginModal = () => {
    useStore.setState({ isShowLoginModal: true });
  };
  const hideLoginModal = () => {
    useStore.setState({ isShowLoginModal: false });
  };
  const LoadingNow = () => {
    useStore.setState({ isLoading: true });
  };

  const LoadingDone = () => {
    useStore.setState({ isLoading: false });
  };

  const router = useRouter();

  return (
    <>
      <AnimatePresence exitBeforeEnter mode={"wait"}>
        {isLoading ? (
          <motion.div
            key={router.route}
            initial={animate.initial}
            animate={animate.animate}
            exit={animate.exit}
          >
            <LoadingSpinner router={router} />
          </motion.div>
        ) : null}

        {isShowLoginModal && (
          <LoginModal
            openLoginModal={openLoginModal}
            isShowLoginModal={isShowLoginModal}
            hideLoginModal={hideLoginModal}
            LoadingNow={LoadingNow}
            LoadingDone={LoadingDone}
          />
        )}
      </AnimatePresence>
      <NavBar
        isLoading={isLoading}
        isShowLoginModal={isShowLoginModal}
        openLoginModal={openLoginModal}
        hideLoginModal={hideLoginModal}
        LoadingNow={LoadingNow}
        LoadingDone={LoadingDone}
        router={router}
      />
      <SubTransition>
        <div className="layout-content-holder-bc">{children}</div>
      </SubTransition>
    </>
  );
}

export default MainLayout;

+++ 目录不会出现此错误/pages。仅发生在 using/app目录中

Answer 1

layout.tsx当没有<body>标签时发生在我身上<html>。

编辑：

这是文档中的确切部分

根布局必须定义 <html> 和 <body> 标签，因为 Next.js 不会自动创建它们。

Answer 2

将文件传输到新应用程序时，弹出了相同的错误，这让我相信这是我复制的代码中的某些内容。问题出在我的layout.tsx 文件中，由于 dom 不匹配，该文件导致了水合作用/安装问题。

旧布局导致错误

export default function RootLayout({ children}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
    <div className={styles.container}>
      <header className={styles.header}>
          <>
            <Image
              priority
              src="/images/profile.jpg"
              className={utilStyles.borderCircle}
              height={144}
              width={144}
              alt=""
            />
            <h1 className={utilStyles.heading2Xl}>{name}</h1>
          </>
      </header>
      <main>{children}</main>
    </div>
    </html>
  );

修复了layout.tsx中的代码

export default function RootLayout({ children}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
    <head className={styles.header}>
    </head>
    <body>{children}</body>
    </html>
  );
}

更好：来自 beta 文档的参考布局

export default function RootLayout({ children }) {
  return (
    <html lang="en">
    {
    }
    <head />
    <body>{children}</body>
    </html>
  );
}

**错误供其他人遇到此问题时参考。

Uncaught Error: invariant expected app router to be mounted

react-dom.development.js:21494 The above error occurred in the component:
at HotReload (webpack-internal:///./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11)**

Answer 3

不要像这样将任何包装元素放在 body 标签之外

   <AUthProvider>
    <body>
          {children}
     </body>
   </AuthProvider>

但请确保 body 标签始终包含所有组件

    <body>
       <AUthProvider>
          {children}
      <AUthProvider>
    </body>

希望这有帮助