在React JS中,只能在<Router>组件的上下文中使用useNavigate()的未捕获错误
P粉207969787
P粉207969787 2023-08-26 12:55:20
[HTML讨论组]
<p><strong>我删除了一些代码以便阅读更容易</strong></p> <blockquote> <p>但是所有的东西都正确导入并且正常工作,但是我无法解决这个错误 <strong>我得到了这个错误,但是我看到了一个教程,甚至reactRouter网站也有相同的方法,但是它在我的代码中不起作用</strong></p> </blockquote> <p><strong>我想在键盘上按下Enter键时更改路由</strong></p> <blockquote> <p>这是app.js文件</p> </blockquote> <pre class="brush:php;toolbar:false;">function App() { return ( &lt;div&gt; &lt;div key="navbar" className="navbar"&gt; &lt;Navbar /&gt; &lt;/div&gt; &lt;div key="search-box" className="search-box"&gt; &lt;SearchBar carddata={cards}/&gt; &lt;/div&gt; &lt;div&gt; &lt;Cards key="cards" carddata={cards} /&gt; &lt;/div&gt; &lt;/div&gt; ); } export default App;</pre> <blockquote> <p>这是所有路由发生的文件,当useNavigate更改路由时,它应该打开我想要打开的路由('/SearchResult')</p> </blockquote> <pre class="brush:php;toolbar:false;">const Cards = ({ carddata: cardComponent }) =&gt; { return ( //这是当useNavigate更改路由为“/SearchResult”时应该打开的文件 &lt;Route path="/SearchResult" element={&lt;SearchResPage /&gt;}&gt;&lt;/Route&gt; &lt;/Routes&gt; &lt;div className="right-section"&gt; &lt;RightCard cardData={cardComponent} /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/Router&gt; ); }; export default Cards;</pre> <p><strong>这是将使用useNavigate更改路由的文件,我想要打开的文件是searchResPage(代码将在此代码之后)</strong></p> <pre class="brush:php;toolbar:false;">import { useNavigate } from "react-router-dom"; const SearchBar = ({ carddata}) =&gt; { const navigate=useNavigate(); //这是onKeyDown调用的函数 function searchResult(e) { if (e.key === "Enter") { if (e.target.value === "") return; //用于更改路由 navigate('/SearchResult') //用于过滤从props传递的结果并显示它们 carddata.filter((result) =&gt; { if (`${result.heading}`.toLowerCase().match(e.target.value)) { console.log(result) } }); } } return ( &lt;div className="flex"&gt; &lt;input onKeyDown={searchResult} type="text" &gt;&lt;/input&gt; &lt;/div&gt; ); }; export default SearchBar;</pre> <blockquote> <p>或者还有其他方法可以在按下Enter键时更改路由而不刷新页面吗?我能找到这个选项,但不知道为什么它不起作用</p> </blockquote><p><br /></p>
P粉207969787
P粉207969787

全部回复(1)
P粉252116587

错误意味着您正在尝试在Router之外使用useNavigate钩子。 最常见的是在react-router-dom包中,如BrowserRouter,然后您有RoutesRoute组件。

应该像这样(Router可以在App中或另一个文件中,如index.js):

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import ExamplePage from "./components/ExamplePage";
import SearchBar from "./components/SearchBar";

function App () {
  return (
    <div className="App">
      <Router>        {/* <--- 需要的组件,Router */}
        <SearchBar /> {/* <--- 在Router内部使用useNavigate的组件 */}
        <Routes>
          <Route path="/my-page" element={<ExamplePage />} />
        </Routes>
      </Router>
    </div>
  )
};

export default App;

然后您的组件应该可以正常工作。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号