<p><strong>Ich habe einige Codes entfernt, um die Lesbarkeit zu verbessern</strong></p> <blockquote> <p>Aber alles ist korrekt importiert und funktioniert einwandfrei, aber ich kann diesen Fehler nicht beheben<strong>Ich habe diesen Fehler erhalten, aber ich habe ein Tutorial gesehen und sogar die ReactRouter-Website hat die gleiche Methode, aber sie funktioniert bei mir nicht. Funktioniert nicht in der Code</strong></p> </blockquote> <p><strong>Ich möchte die Route ändern, wenn die Eingabetaste auf der Tastatur gedrückt wird</strong></p> <blockquote> <p>Dies ist die app.js-Datei</p> </blockquote> <pre class="brush:php;toolbar:false;">function App() { zurückkehren ( <div> <div key="navbar" className="navbar"> <Navigationsleiste /> </div> <div key="search-box" className="search-box"> <SearchBar carddata={cards}/> </div> <div> <Cards key="cards" carddata={cards} /> </div> </div> ); } Standard-App exportieren;</pre> <blockquote> <p>Dies ist die Datei, in der das gesamte Routing erfolgt. Wenn useNavigate die Route ändert, sollte die Route geöffnet werden, die ich öffnen möchte ('/SearchResult')</p> </blockquote> <pre class="brush:php;toolbar:false;">const Cards = ({ carddata: cardComponent }) => zurückkehren ( //Dies ist die Datei, die geöffnet werden soll, wenn useNavigate die Route in „/SearchResult“ ändert. <Route path="/SearchResult" element={<SearchResPage />}></Route> </Routen> <div className="right-section"> <RightCard cardData={cardComponent} /> </div> </div> </Router> ); }; Standardkarten exportieren;</pre> <p><strong>Dies ist die Datei, die die Route mit useNavigate ändert. Die Datei, die ich öffnen möchte, ist searchResPage (der Code steht nach diesem Code)</strong></p> <pre class="brush:php;toolbar:false;">import { useNavigate } from "react-router-dom"; const SearchBar = ({carddata}) => const navigation=useNavigate(); //Dies ist die von onKeyDown aufgerufene Funktion Funktion searchResult(e) { if (e.key === "Enter") { if (e.target.value === "") return; //Wird zum Ändern des Routings verwendet navigieren('/Suchergebnis') //Wird verwendet, um die von Requisiten übergebenen Ergebnisse zu filtern und anzuzeigen carddata.filter((result) => { if (`${result.heading}`.toLowerCase().match(e.target.value)) { console.log(Ergebnis) } }); } } zurückkehren ( <div className="flex"> <input onKeyDown={searchResult} type="text" ></input> </div> ); }; Standard-Suchleiste exportieren;</pre> <blockquote> <p>Oder gibt es eine andere Möglichkeit, die Route zu ändern, wenn die Eingabetaste gedrückt wird, ohne die Seite zu aktualisieren? Ich kann diese Option finden, weiß aber nicht, warum sie nicht funktioniert</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;