Ralat tidak ditangkap dengan useNavigate() hanya dalam konteks komponen <Router> dalam React JS

Question

Saya mengalih keluar beberapa kod untuk memudahkan membaca

Tetapi semuanya diimport dengan betul dan berfungsi dengan baik tetapi saya tidak dapat menyelesaikan ralat iniSaya mendapat ralat ini tetapi saya melihat tutorial dan malah tapak web reactRouter mempunyai kaedah yang sama tetapi ia tidak berfungsi untuk saya tidak berfungsi kod

Saya mahu menukar laluan apabila kekunci Enter ditekan pada papan kekunci

Ini ialah fail app.js

function App() {
       
  kembali (
    <div>
        <div key="navbar" className="navbar">
            <Navbar />
        </div>
        <div key="search-box" className="search-box">
            <Carddata Bar Carian={cards}/>
        </div>
        <div>
            <Kunci kad="kad" carddata={kad} />
        </div>
    </div>
  );
}

eksport Apl lalai;

Ini ialah fail di mana semua penghalaan berlaku, apabila useNavigate menukar laluan ia sepatutnya membuka laluan yang saya mahu buka ('/SearchResult')

const Kad = ({ carddata: cardComponent }) =>
  kembali (
//Ini ialah fail yang harus dibuka apabila useNavigate menukar laluan kepada "/SearchResult"
          <Route path="/SearchResult" element={<SearchResPage />}></Route>
        </Laluan>

        <div className="right-section">
          <RightCard cardData={cardComponent} />
        </div>
      </div>
    </Penghala>
  );
};
eksport Kad lalai;

Ini ialah fail yang akan menukar laluan menggunakan useNavigate, fail yang saya ingin buka ialah searchResPage (kod akan berada selepas kod ini)

import { useNavigate } daripada "react-router-dom";

const SearchBar = ({ carddata}) =>
  const navigate=useNavigate();

  //Ini ialah fungsi yang dipanggil oleh onKeyDown
fungsi carianResult(e) {
    
    if (e.key === "Enter") {
      jika (e.target.value === "") kembali;
        //Digunakan untuk menukar penghalaan
          navigasi('/SearchResult')

        //Digunakan untuk menapis hasil yang diluluskan daripada prop dan memaparkannya
        carddata.filter((hasil) => {
          if (`${result.heading}`.toLowerCase().match(e.target.value)) {
              console.log(hasil)
            }
      });
    }
  }

  kembali (
    <div className="flex">
      <input onKeyDown={searchResult} type="text" ></input>
    </div>
  );
};

eksport Bar Carian lalai;

Atau adakah terdapat cara lain untuk menukar laluan apabila kekunci enter ditekan tanpa memuat semula halaman? Saya boleh mencari pilihan ini tetapi tidak tahu mengapa ia tidak berfungsi

Answer 1

Ralat bermakna anda cuba menyambung Router之外使用useNavigate. Yang paling biasa adalah dalam komponen react-router-dom包中，如BrowserRouter，然后您有Routes和Route.

sepatutnya kelihatan seperti ini (Penghala boleh berada dalam Apl atau fail lain seperti 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;

Maka komponen anda sepatutnya berfungsi dengan baik.