<p><strong>Saya mengalih keluar beberapa kod untuk memudahkan membaca</strong></p> <blockquote> <p>Tetapi semuanya diimport dengan betul dan berfungsi dengan baik tetapi saya tidak dapat menyelesaikan ralat ini<strong>Saya 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</strong></p> </blockquote> <p><strong>Saya mahu menukar laluan apabila kekunci Enter ditekan pada papan kekunci</strong></p> <blockquote> <p>Ini ialah fail app.js</p> </blockquote> <pre class="brush:php;toolbar:false;">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;</pre> <blockquote> <p>Ini ialah fail di mana semua penghalaan berlaku, apabila useNavigate menukar laluan ia sepatutnya membuka laluan yang saya mahu buka ('/SearchResult')</p> </blockquote> <pre class="brush:php;toolbar:false;">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;</pre> <p><strong>Ini ialah fail yang akan menukar laluan menggunakan useNavigate, fail yang saya ingin buka ialah searchResPage (kod akan berada selepas kod ini)</strong></p> <pre class="brush:php;toolbar:false;">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;</pre> <blockquote> <p>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</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;