NextRouter was not mounted

Question

我正试图为我的物业租赁应用程序实现搜索功能。我添加了Nextjs路由器。然而，当我去localhost:3000/搜索时，我得到这个错误:

Server Error
Error: Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
useRouter
file:///C:/Users/doguk/Desktop/emlakuygulamasi/node_modules/next/dist/client/router.js (122:15)
pagessearch.tsx (10:28) @ Search
8 | const Search = () => {
9 | const [searchFilters, setSearchFilters] = useState(false);
> 10 | const router = useRouter();
|                        ^
11 | 
12 | return (
13 |     <Box>
Call Stack
renderWithHooks
file:///C:/Users/doguk/Desktop/emlakuygulamasi/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)
renderIndeterminateComponent
file:///C:/Users/doguk/Desktop/emlakuygulamasi/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5731:15)
renderElement
file:///C:/Users/doguk/Desktop/emlakuygulamasi/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
file:///C:/Users/doguk/Desktop/emlakuygulamasi/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
file:///C:/Users/doguk/Desktop/emlakuygulamasi/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
file:///C:/Users/doguk/Desktop/emlakuygulamasi/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
file:///C:/Users/doguk/Desktop/emlakuygulamasi/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
file:///C:/Users/doguk/Desktop/emlakuygulamasi/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)

我在search.tsx中的代码如下，它还没有完成:

import {useState} from 'react';
import { useRouter } from 'next/router';
import Image from 'next/image';
import {Flex, Box, Text, Icon} from '@chakra-ui/react';
import { BsFilter } from 'react-icons/bs';
import SearchFilters from '../components/SearchFilters';
const Search = () => {
const [searchFilters, setSearchFilters] = useState(false);
const router = useRouter();
return (
<Box>
<Flex
cursor="pointer"
bg="gray.100"
borderBottom="1px"
borderColor="gray.200"
p="2"
fontWeight="black"
fontSize="lg"
justifyContent="center"
alignItems="center"
onClick={() => setSearchFilters((prevFilters) => !prevFilters)}
>
<Text>Filtrele</Text>
<Icon paddingLeft="2" w="7" as={BsFilter}></Icon>
</Flex>
{searchFilters && <SearchFilters />}
</Box>
) 
}
export default Search;

我读了Nextjs文档，我已经检查了Stackoverflow的答案，但没有工作。这应该是相当直接的，但我不明白我做错了什么。

Answer 1

try doimport { useRouter } from "next/navigation";

较早的useRouter from "next/router"被使用，但在NEXT-13引入之后。包从"next/router"下一个/navigation" .

从pages目录迁移:

• 新的useRouter钩子应该从next/navigation和不是下一个/路由器。

这里是参考- https://nextjs.org/docs/messages/next-router-not-mounted