Nicht erfasster Fehler mit useNavigate() nur im Kontext einer <Router>-Komponente in React JS
P粉207969787
2023-08-26 12:55:20
<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>
错误意味着您正在尝试在
Router
之外使用useNavigate
钩子。 最常见的是在react-router-dom
包中,如BrowserRouter
,然后您有Routes
和Route
组件。应该像这样(Router可以在App中或另一个文件中,如
index.js
):然后您的组件应该可以正常工作。