Erreur non interceptée avec useNavigate() uniquement dans le contexte d'un composant <Router> dans React JS

Question

J'ai supprimé du code pour le rendre plus facile à lire

Mais tout est importé correctement et fonctionne bien mais je n'arrive pas à résoudre cette erreurJ'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

Je souhaite modifier l'itinéraire lorsque la touche Entrée du clavier est enfoncée

Voici le fichier app.js

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 ;

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

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 ;

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)

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 ;

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

Answer 1

Erreur signifie que vous essayez de vous connecter Router之外使用useNavigate. Le plus courant se trouve dans le composant react-router-dom包中，如BrowserRouter，然后您有Routes和Route.

devrait ressembler à ceci (le routeur peut être dans l'application ou dans un autre fichier comme 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;

Alors votre composant devrait fonctionner correctement.