Next.js 显示 ‘NextRouter 未挂载’ 错误。

huangapple
go评论127阅读模式
英文:

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.

  1. "use client"
  2. import { useState } from 'react';
  3. import { useRouter } from 'next/router';
  4. import Link from 'next/link';
  6. export default function Navbar() {
  7.   const [searchValue, setSearchValue] = useState('');
  8.   const router = useRouter();
  10.   const handleSearch = (e) => {
  11.     e.preventDefault();
  12.     router.push(`/search/${searchValue}`);
  13.   };
  15.   const handleInputChange = (e) => {
  16.     setSearchValue(e.target.value);
  17.   };
  19.   return (
  20.     <div id="navbarComp">
  21.       <div id="navbar">
  22.         <Link href="/">
  23.           <div id="explore">
  24.             <h1>Explore</h1>
  25.           </div>
  26.         </Link>
  27.       </div>
  28.       <div id="inputsearch">
  29.         <form onSubmit={handleSearch}>
  30.           <input
  31.             className="dog"
  32.             placeholder="Search"
  33.             value={searchValue}
  34.             onChange={handleInputChange}
  35.           />
  36.         </form>
  37.       </div>
  38.     </div>
  39.   );
  40. }

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 &#39;/search/${searchvalue}&#39; where &#39;searchvalue&#39; is the value of the input. However whenever I try to do so, I get an error saying &#39;Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted&#39;

  1. &quot;use client&quot;
  2. import { useState } from &#39;react&#39;;
  3. import { useRouter } from &#39;next/router&#39;;
  4. import Link from &#39;next/link&#39;;
  6. export default function Navbar() {
  7.   const [searchValue, setSearchValue] = useState(&#39;&#39;);
  8.   const router = useRouter();
  10.   const handleSearch = (e) =&gt; {
  11.     e.preventDefault();
  12.     router.push(`/search/${searchValue}`);
  13.   };
  15.   const handleInputChange = (e) =&gt; {
  16.     setSearchValue(e.target.value);
  17.   };
  19.   return (
  20.     &lt;div id=&quot;navbarComp&quot;&gt;
  21.       &lt;div id=&quot;navbar&quot;&gt;
  22.         &lt;Link href=&quot;/&quot;&gt;
  23.           &lt;div id=&quot;explore&quot;&gt;
  24.             &lt;h1&gt;Explore&lt;/h1&gt;
  25.           &lt;/div&gt;
  26.         &lt;/Link&gt;
  27.       &lt;/div&gt;
  28.       &lt;div id=&quot;inputsearch&quot;&gt;
  29.         &lt;form onSubmit={handleSearch}&gt;
  30.           &lt;input
  31.             className=&quot;dog&quot;
  32.             placeholder=&quot;Search&quot;
  33.             value={searchValue}
  34.             onChange={handleInputChange}
  35.           /&gt;
  36.         &lt;/form&gt;
  37.       &lt;/div&gt;
  38.     &lt;/div&gt;
  39.   );
  40. }

I tried multiple alternatives, none of which seemed to work.

答案1

得分: 0

以下是翻译好的代码部分：

  1. "use client"
  2. import { useState } from 'react';
  3. import { useRouter } from 'next/navigation';
  4. import Link from 'next/link';
  6. export default function Navbar() {
  7.   const [searchValue, setSearchValue] = useState('');
  8.   const router = useRouter();
  10.   const handleInputChange = (e) => {
  11.     setSearchValue(e.target.value);
  12.   };
  14.   const handleSearch = (e) => {
  15.     e.preventDefault();
  16.     router.push(`/search/${searchValue}`);
  17.   };
  19.   return (
  20.     <div id="navbarComp">
  21.       <div id="navbar">
  22.         <Link href="/">
  23.           <div id="explore">
  24.             <h1>Explore</h1>
  25.           </div>
  26.         </Link>
  27.       </div>
  28.       <div id="inputsearch">
  29.         <form onSubmit={handleSearch}>
  30.           <input
  31.             className="dog"
  32.             placeholder="Search"
  33.             value={searchValue}
  34.             onChange={handleInputChange}
  35.             onSubmit={() => router.push(`/search/${searchValue}`)}
  36.           />
  37.         </form>
  38.       </div>
  39.     </div>
  40.   );
  41. }

请注意，代码中的HTML和JavaScript部分已被翻译，但HTML中的特殊字符（如&quot;和&lt;）未被翻译，因为它们是用于表示HTML实体的编码，需要保留原样。

英文:

Nevermind, I worked it out.

Here is the working code

  1. &quot;use client&quot;
  2. import { useState } from &#39;react&#39;;
  3. import { useRouter } from &#39;next/navigation&#39;;
  4. import Link from &#39;next/link&#39;;
  6. export default function Navbar() {
  7.   const [searchValue, setSearchValue] = useState(&#39;&#39;);
  8.   const router = useRouter();
  10.   const handleInputChange = (e) =&gt; {
  11.     setSearchValue(e.target.value);
  12.   };
  14.   const handleSearch = (e) =&gt; {
  15.     e.preventDefault();
  16.     router.push(`/search/${searchValue}`);
  17.   };
  19.   return (
  20.     &lt;div id=&quot;navbarComp&quot;&gt;
  21.       &lt;div id=&quot;navbar&quot;&gt;
  22.         &lt;Link href=&quot;/&quot;&gt;
  23.           &lt;div id=&quot;explore&quot;&gt;
  24.             &lt;h1&gt;Explore&lt;/h1&gt;
  25.           &lt;/div&gt;
  26.         &lt;/Link&gt;
  27.       &lt;/div&gt;
  28.       &lt;div id=&quot;inputsearch&quot;&gt;
  29.         &lt;form onSubmit={handleSearch}&gt;
  30.           &lt;input
  31.             className=&quot;dog&quot;
  32.             placeholder=&quot;Search&quot;
  33.             value={searchValue}
  34.             onChange={handleInputChange}
  35.             onSubmit={() =&gt; router.push(`/search/${searchValue}`)}
  36.           /&gt;
  37.         &lt;/form&gt;
  38.       &lt;/div&gt;
  39.     &lt;/div&gt;
  40.   );
  41. }

答案2

得分: 0

尝试将输入事件对象传递给handleInputChange函数，就像这样：

  1. ...
  3. <input
  4.  className="dog"
  5.  placeholder="搜索"
  6.  value={searchValue}
  7.  onChange={(e) => handleInputChange(e)}
  8. />
  10. ...
英文:

try to pass the input event object to handleInputChange like:

  1. ...
  3. &lt;input
  4.  className=&quot;dog&quot;
  5.  placeholder=&quot;Search&quot;
  6.  value={searchValue}
  7.  onChange={(e)=&gt; handleInputChange(e)}
  8. /&gt;
  10. ...

huangapple
  • 本文由 发表于 2023年6月25日 16:57:23
  • 转载请务必保留本文链接：https://go.coder-hub.com/76549642.html
  • javascript
  • next.js
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定