web-dev-qa-db-de.com

React-Router v4 - Link vs. Redirect vs. History

Es scheint eine gewisse Verwirrung darüber zu geben, was gegenüber dem anderen verwendet werden soll:

  • <Link to='/some/path'>
  • <Redirect to='/some/path'/>
  • history.Push('/some/path')

Ich benutze React/Router jetzt schon eine Weile, und verschiedene Posts/Antworten sagen unterschiedliche Dinge darüber aus, wann sie verwendet werden sollen, und manchmal stimmen sie nicht mit dem überein, was jemand anderes gesagt hat. Ich glaube, ich muss diesbezüglich etwas präzisieren.

Nach dem, was ich über Link und diese Dokumentation verstehe:

Bietet eine deklarative, zugängliche Navigation in Ihrer Anwendung.

Nach dem, was ich über Redirect und diese Dokumentation verstehe:

Navigiert zu einem neuen Ort. Der neue Speicherort überschreibt den aktuellen Speicherort im Verlaufsstapel, wie dies bei serverseitigen Umleitungen (HTTP 3xx) der Fall ist.

Es scheint, als ob alle Posts, die ich gelesen habe, Redirect verwenden, um in der Anwendung zu navigieren, und niemand empfiehlt, Link zu verwenden, wie in diesem Post .

Jetzt kann history dasselbe tun wie Link und Redirect, außer dass ich eine Verlaufsstapel-Ablaufverfolgung habe.

Frage 1: Wann würde ich Link vs Redirect verwenden wollen, was ist der Anwendungsfall gegenüber dem anderen?

Frage 2: Da history einen Benutzer mit dem zusätzlichen Bonus des Verlaufsstapels an einen anderen Ort in der App weiterleiten kann, sollte ich das immer tun Verwenden Sie einfach das Verlaufsobjekt beim Routing?

Frage 3: Wenn ich außerhalb der App routen möchte, wie geht das am besten? Anchor-Tag, Window.location.href, Redirect, Link, keine der oben genannten?

17
Phillip

Zunächst einmal würde ich wirklich empfehlen, diese Seite durchzulesen:
https://reacttraining.com/react-router/web/api/BrowserRouter

Der BrowserRouter von React Router verwaltet den Verlaufsstapel für Sie, was bedeutet, dass Sie ihn selten manuell ändern müssen.

Aber um Ihre Fragen zu beantworten:
Antwort 1: Sie möchten in fast allen Anwendungsfällen Link oder NavLink verwenden . Redirect ist jedoch in bestimmten Situationen nützlich. Ein Beispiel ist das Rendern einer 404-Seite, wenn der Benutzer versucht, auf eine undefinierte Route zuzugreifen. Das Redirect leitet den Benutzer von der 404-Route zu einer neuen Route Ihrer Wahl um und ersetzt dann den letzten Eintrag im Verlaufsstapel durch die umgeleitete Route.

Dies bedeutet, dass der Benutzer die Zurück-Taste seines Browsers nicht drücken und zur 404-Route zurückkehren kann.

LinkNavLink und Redirect verwenden alle die Protokoll-API des Routers unter der Haube. Wenn Sie diese Komponenten anstelle des Protokolls manuell verwenden, können Sie Änderungen an der Protokoll-API in der sicher durchführen Zukunft. Die Verwendung dieser Komponenten sichert Ihren Code für die Zukunft.

Antwort 2: BrowserRouter Behält den Verlaufsstapel für Sie bei. Im Allgemeinen ist meine Meinung, dass Sie nicht manuell aktualisieren möchten, wo Sie möchten können.

Antwort 3: Hier einige Beispiele für externe Reaktionslinks:

<Route path='/external' component={() => window.location = 'https://external.com/path'}/>

<a href='https://external.com/path' target='_blank' rel='noopener noreferrer'>Regular Anchor tags work great</a>

target='_blank' öffnet den Link in einem neuen Tab, aber stellen Sie bitte sicher, dass rel='noopener noreferrer' gegen Sicherheitslücken

12
Mike Abeln