英文:
NextJS 13 TypeError: router.events is undefined, next/navigation already imported
问题
我正在尝试在路由加载URL状态时显示“加载中”文本，使用最新的Next.js 13，next/router 替换为 next/navigation。
"use client";
import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import axios from "axios";
const Header = () => {
const [searchQuery, setSearchQuery] = useState("");
const [isLoading, setIsLoading] = useState(false);
const router = useRouter();
useEffect(() => {
const handleStart = () => {
setIsLoading(true);
};
const handleComplete = () => {
setIsLoading(false);
};
router.events.on("routeChangeStart", handleStart);
router.events.on("routeChangeComplete", handleComplete);
return () => {
router.events.off("routeChangeStart", handleStart);
router.events.off("routeChangeComplete", handleComplete);
};
}, [router]);
const handleFormSubmit = async (e) => {
e.preventDefault();
setIsLoading(true);
try {
const response = await axios.get(`/result?search_query=${encodeURIComponent(searchQuery)}`);
const data = response.data;
console.log("Search Results:", data);
router.push(`/result?search_query=${encodeURIComponent(searchQuery)}`);
} catch (error) {
console.log("Error:", error);
} finally {
setIsLoading(false);
}
};
const handleInputChange = (e) => {
setSearchQuery(e.target.value);
};
return (
{/* 渲染数据 */}
);
};
export default Header;
使用 next/router 会出现 Error: NextRouter was not mounted.
我的文件位于 app/components/Header.jsx，更改为客户端代码位于 pages/Header.jsx 也不起作用。
英文:
I'm trying to show Loading text while the route is loading the url state using the latest nextjs 13, next/router replaced with next/navigation
"use client";
import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import axios from "axios";
const Header = () => {
const [searchQuery, setSearchQuery] = useState("");
const [isLoading, setIsLoading] = useState(false);
const router = useRouter();
useEffect(() => {
const handleStart = () => {
setIsLoading(true);
};
const handleComplete = () => {
setIsLoading(false);
};
router.events.on("routeChangeStart", handleStart);
router.events.on("routeChangeComplete", handleComplete);
return () => {
router.events.off("routeChangeStart", handleStart);
router.events.off("routeChangeComplete", handleComplete);
};
}, [router]);
const handleFormSubmit = async (e) => {
e.preventDefault();
setIsLoading(true);
try {
const response = await axios.get(`/result?search_query=${encodeURIComponent(searchQuery)}`);
const data = response.data;
console.log("Search Results:", data);
router.push(`/result?search_query=${encodeURIComponent(searchQuery)}`);
} catch (error) {
console.log("Error:", error);
} finally {
setIsLoading(false);
}
};
const handleInputChange = (e) => {
setSearchQuery(e.target.value);
};
return (
{/* Render data */}
);
};
export default Header;
Using next/router gives Error: NextRouter was not mounted.
My file is in app/components/Header.jsx, changing to client side to pages/Header.jsx also not working
答案1
得分: 3
我遇到了相同的问题。
在 Next.js 13 上，router.events 不再存在。
在 Git 上进行了快速搜索，找到了一些帮助。
希望这有所帮助。
英文:
i ran in to the same issue
router.events doesn't exist anymore on Next.js 13
doing a quick search on git found some help
https://github.com/vercel/next.js/discussions/42016?sort=new
hope this helps
答案2
得分: 0
路由器事件 API 在应用程序路由中已被移除，一些人建议以下解决方法：import { Suspense } from "react";
<Suspense fallback={
}>{children}
它有一些帮助，但回退组件将替代页面内容，所以可能不是一个完美的替代方案。
英文:
The router.events api is removed in app router, some folk suggest the following work around : import { Suspense } from "react";
<Suspense fallback={<div>Loading</div>}>{children}</Suspense>
It has some help but the fallback component will replace the page content, so may not be a perfect alternative
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论