<p><strong>J'ai supprimé du code pour le rendre plus facile à lire</strong></p> <blockquote> <p>Mais tout est importé correctement et fonctionne bien mais je n'arrive pas à résoudre cette erreur<strong>J'ai eu cette erreur mais j'ai vu un tutoriel et même le site Web de ReactRouter a la même méthode mais cela ne fonctionne pas pour moi ne fonctionne pas le code</strong></p> </blockquote> <p><strong>Je souhaite modifier l'itinéraire lorsque la touche Entrée du clavier est enfoncée</strong></p> <blockquote> <p>Voici le fichier app.js</p> </blockquote> <pre class="brush:php;toolbar:false;">fonction App() { retour ( <div> <div key="navbar" className="navbar"> <Barre de navigation /> </div> <div key="search-box" className="search-box"> <SearchBar carddata={cards}/> </div> <div> <Cartes key="cartes" carddata={cartes} /> </div> </div> ); } exporter l'application par défaut ;</pre> <blockquote> <p>Il s'agit du fichier dans lequel tout le routage se produit. Lorsque useNavigate modifie l'itinéraire, il doit ouvrir l'itinéraire que je souhaite ouvrir ("/SearchResult")</p> </blockquote> <pre class="brush:php;toolbar:false;">const Cards = ({ carddata: cardComponent }) => retour ( //C'est le fichier qui doit être ouvert lorsque useNavigate modifie l'itinéraire en "/SearchResult" <Route path="/SearchResult" element={<SearchResPage />}></Route> </Itinéraires> <div className="right-section"> <RightCard cardData={cardComponent} /> </div> </div> </Routeur> ); } ; exporter les cartes par défaut ;</pre> <p><strong>C'est le fichier qui va changer l'itinéraire en utilisant useNavigate, le fichier que je veux ouvrir est searchResPage (le code sera après ce code)</strong></p> <pre class="brush:php;toolbar:false;">import { useNavigate } depuis "react-router-dom" ; const SearchBar = ({ données de carte}) => const naviguer=useNavigate(); //C'est la fonction appelée par onKeyDown fonction rechercheRésultat(e) { if (e.key === "Entrée") { if (e.target.value === "") return ; //Utilisé pour modifier le routage naviguer('/SearchResult') //Utilisé pour filtrer les résultats transmis par les accessoires et les afficher carddata.filter((résultat) => { if (`${result.heading}`.toLowerCase().match(e.target.value)) { console.log (résultat) } }); } } retour ( <div className="flex"> <input onKeyDown={searchResult} type="text" ></input> </div> ); } ; exporter la barre de recherche par défaut ;</pre> <blockquote> <p>Ou existe-t-il un autre moyen de modifier l'itinéraire lorsque la touche Entrée est enfoncée sans actualiser la page ? Je peux trouver cette option mais je ne sais pas pourquoi elle ne fonctionne pas</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;