英文:
Nextjs showing 'NextRouter was not mounted' error
问题
In this code, you are attempting to retrieve the value of an input and redirect to '/search/${searchvalue}', where 'searchvalue' represents the input's value. However, you encounter an error message: 'Error: NextRouter was not mounted'. You can find more information about this error here.
"use client"
import { useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
export default function Navbar() {
const [searchValue, setSearchValue] = useState('');
const router = useRouter();
const handleSearch = (e) => {
e.preventDefault();
router.push(`/search/${searchValue}`);
};
const handleInputChange = (e) => {
setSearchValue(e.target.value);
};
return (
<div id="navbarComp">
<div id="navbar">
<Link href="/">
<div id="explore">
<h1>Explore</h1>
</div>
</Link>
</div>
<div id="inputsearch">
<form onSubmit={handleSearch}>
<input
className="dog"
placeholder="Search"
value={searchValue}
onChange={handleInputChange}
/>
</form>
</div>
</div>
);
}
You've tried multiple alternatives, but none of them appeared to work.
英文:
In this code, I am trying to get the value of input and trying to redirect it to '/search/${searchvalue}' where 'searchvalue' is the value of the input. However whenever I try to do so, I get an error saying 'Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted'
"use client"
import { useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
export default function Navbar() {
const [searchValue, setSearchValue] = useState('');
const router = useRouter();
const handleSearch = (e) => {
e.preventDefault();
router.push(`/search/${searchValue}`);
};
const handleInputChange = (e) => {
setSearchValue(e.target.value);
};
return (
<div id="navbarComp">
<div id="navbar">
<Link href="/">
<div id="explore">
<h1>Explore</h1>
</div>
</Link>
</div>
<div id="inputsearch">
<form onSubmit={handleSearch}>
<input
className="dog"
placeholder="Search"
value={searchValue}
onChange={handleInputChange}
/>
</form>
</div>
</div>
);
}
I tried multiple alternatives, none of which seemed to work.
答案1
得分: 0
以下是翻译好的代码部分：
"use client"
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
export default function Navbar() {
const [searchValue, setSearchValue] = useState('');
const router = useRouter();
const handleInputChange = (e) => {
setSearchValue(e.target.value);
};
const handleSearch = (e) => {
e.preventDefault();
router.push(`/search/${searchValue}`);
};
return (
<div id="navbarComp">
<div id="navbar">
<Link href="/">
<div id="explore">
<h1>Explore</h1>
</div>
</Link>
</div>
<div id="inputsearch">
<form onSubmit={handleSearch}>
<input
className="dog"
placeholder="Search"
value={searchValue}
onChange={handleInputChange}
onSubmit={() => router.push(`/search/${searchValue}`)}
/>
</form>
</div>
</div>
);
}
请注意，代码中的HTML和JavaScript部分已被翻译，但HTML中的特殊字符（如"和<）未被翻译，因为它们是用于表示HTML实体的编码，需要保留原样。
英文:
Nevermind, I worked it out.
Here is the working code
"use client"
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
export default function Navbar() {
const [searchValue, setSearchValue] = useState('');
const router = useRouter();
const handleInputChange = (e) => {
setSearchValue(e.target.value);
};
const handleSearch = (e) => {
e.preventDefault();
router.push(`/search/${searchValue}`);
};
return (
<div id="navbarComp">
<div id="navbar">
<Link href="/">
<div id="explore">
<h1>Explore</h1>
</div>
</Link>
</div>
<div id="inputsearch">
<form onSubmit={handleSearch}>
<input
className="dog"
placeholder="Search"
value={searchValue}
onChange={handleInputChange}
onSubmit={() => router.push(`/search/${searchValue}`)}
/>
</form>
</div>
</div>
);
}
答案2
得分: 0
尝试将输入事件对象传递给handleInputChange函数，就像这样：
...
<input
className="dog"
placeholder="搜索"
value={searchValue}
onChange={(e) => handleInputChange(e)}
/>
...
英文:
try to pass the input event object to handleInputChange like:
...
<input
className="dog"
placeholder="Search"
value={searchValue}
onChange={(e)=> handleInputChange(e)}
/>
...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论