Nicht erfasster Fehler mit useNavigate() nur im Kontext einer <Router>-Komponente in React JS

Question

Ich habe einige Codes entfernt, um die Lesbarkeit zu verbessern

Aber alles ist korrekt importiert und funktioniert einwandfrei, aber ich kann diesen Fehler nicht behebenIch 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

Ich möchte die Route ändern, wenn die Eingabetaste auf der Tastatur gedrückt wird

Dies ist die app.js-Datei

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;

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

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;

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)

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;

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

Answer 1

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

应该像这样（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;

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