Ich versuche zu verwenden verwendenNavigieren Aber ich stehe vor folgendem Fehler: useNavigate() darf nur im Kontext einer Komponente verwendet werden in ReactJS. In diesem EZerror-Artikel erfahren Sie, wie Sie diesen Fehler reproduzieren können, und wir werden alle möglichen Lösungen besprechen. Beginnen wir mit diesem Artikel.

Wie kann useNavigate() nur im Zusammenhang mit einem Komponentenfehler verwendet werden?

Ich versuche zu verwenden verwendenNavigieren Aber ich stehe vor folgendem Fehler.

useNavigate() may be used only in the context of a component

Also schreibe ich hier alle möglichen Lösungen, die ich versucht habe, um diesen Fehler zu beheben.

So lösen Sie useNavigate() darf nur im Kontext eines Komponentenfehlers verwendet werden?

  1. So lösen Sie useNavigate() darf nur im Kontext eines Komponentenfehlers verwendet werden?

    Zur Lösung useNavigate() darf nur im Kontext einer Komponente verwendet werden, mit der Sie Ihre App umhüllen müssen Router und dann wird Ihr Fehler behoben. Hier ist das Problem useNavigate() Hook verwendet den Kontext that Router bietet. Also, wenn Sie verwenden verwendenNavigieren Außerhalb des Routers tritt dieser Fehler auf. Öffnen Sie zunächst Ihre Index.js Datei und verpacken Sie Ihre App Mit Router. Wenn Sie Ihre App mit Router umschließen, jetzt Ihre verwendenNavigieren Hooks können den Kontext des Routers verwenden und dann wird Ihr Fehler behoben. Danke.

  2. useNavigate() darf nur im Kontext einer Komponente verwendet werden

    Zur Lösung useNavigate() darf nur im Kontext einer Komponente verwendet werden, mit der Sie Ihre App umhüllen müssen Router und dann wird Ihr Fehler behoben. Hier ist das Problem useNavigate() Hook verwendet den Kontext that Router bietet. Also, wenn Sie verwenden verwendenNavigieren Außerhalb des Routers tritt dieser Fehler auf. Öffnen Sie zunächst Ihre Index.js Datei und verpacken Sie Ihre App Mit Router. Wenn Sie Ihre App mit Router umschließen, jetzt Ihre verwendenNavigieren Hooks können den Kontext des Routers verwenden und dann wird Ihr Fehler behoben. Danke.

Lösung 1: App mit Router umschließen

Zur Lösung useNavigate() darf nur im Kontext einer Komponente verwendet werden, mit der Sie Ihre App umhüllen müssen Router und dann wird Ihr Fehler behoben. Hier ist das Problem useNavigate() Hook verwendet den Kontext that Router bietet. Also, wenn Sie verwenden verwendenNavigieren Außerhalb des Routers tritt dieser Fehler auf. Öffnen Sie zunächst Ihre Index.js Datei und verpacken Sie Ihre App Mit Router Genau wie unten.

root.render(
  <Router>
    <App />
  </Router>
);

Wenn Sie Ihre App mit Router umschließen, jetzt Ihre verwendenNavigieren Hooks können den Kontext des Routers verwenden und dann wird Ihr Fehler behoben. Danke.

Lösung 2: Navigieren Sie Beispiel

Jetzt können Sie einfach verwenden verwendenNavigieren Haken Sie Ihr Projekt überall ein. Gerade verwendenNavigieren So was.

function Redirect() {

  let navigate = useNavigate();

  function handleClick() {
    navigate('/home')
  }

  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

Hier navigieren nimmt Ihren Routennamen an der ersten Position und Sie können die Ersetzungsoption auch auf wahr oder falsch übergeben. Übergeben Sie zuerst einen To-Wert. Es ist derselbe Typ wie mit einem optionalen zweiten Argument {replace, state}, oder übergeben Sie das Delta, das Sie in den Verlaufsstapel verschieben möchten. Zum Beispiel, navigate(-1) entspricht dem Drücken der Zurück-Taste. Genau wie dieser.

function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate(-1)
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

So können Sie es verwenden verwendenNavigieren Haken Sie Ihr React-Projekt ein. Vielen Dank.

Fazit

Es geht nur um diesen Fehler. Ich hoffe, wir haben Ihren Fehler behoben. Kommentieren Sie unten Ihre Gedanken und Ihre Fragen. Kommentieren Sie auch unten, welche Lösung für Sie funktioniert hat?