<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>

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;