Da ich React-Router verwende, um meine Routen in einer React-App zu verarbeiten, bin ich gespannt, ob es eine Möglichkeit gibt, zu einer externen Ressource umzuleiten.
Angenommen, jemand trifft:
example.com/privacy-policy
Ich möchte, dass es umgeleitet wird zu:
example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies
Ich finde genau null Hilfe, um zu vermeiden, dass es in einfachem JS in meiner index.html geschrieben wird, die mit etwas geladen wird wie:
if ( window.location.path === "privacy-policy" ){
window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies"
}
javascript
reactjs
redirect
react-router
react-router-redux
Eric Hodonsky
quelle
quelle
window.location.href
, um eine formelle Weiterleitung zu erhalten.Antworten:
Hier ist ein Einzeiler für die Verwendung von React Router zum Umleiten zu einem externen Link:
Es verwendet das React pure Component-Konzept, um den Code der Komponente auf eine einzige Funktion zu reduzieren, die den Browser nicht rendert, sondern an eine externe URL weiterleitet.
Funktioniert sowohl auf React Router 3 als auch auf React Router 4.
quelle
Es ist nicht erforderlich, eine
<Link />
Komponente vom React-Router zu verwenden.Wenn Sie zu einem externen Link wechseln möchten, verwenden Sie ein Ankertag.
quelle
rel="noopener noreferrer"
dem<a>
Am Ende habe ich meine eigene Komponente gebaut.
<Redirect>
Es werden Informationen aus demreact-router
Element entnommen, damit ich sie in meinen Routen behalten kann. Sowie:Hier ist meine Komponente, falls jemand neugierig ist:
BEARBEITEN - HINWEIS: Dies ist mit
react-router: 3.0.5
, es ist in 4.x nicht so einfachquelle
Es muss kein Reaktionsrouter angefordert werden. Diese Aktion kann nativ ausgeführt werden und wird vom Browser bereitgestellt.
benutz einfach
window.location
quelle
Mit der Link-Komponente des React-Routers können Sie das tun. In der " to " Requisite können Sie 3 Arten von Daten angeben:
Für Ihr Beispiel (externer Link):
https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies
Sie können Folgendes tun:
Sie können auch Requisiten übergeben, auf denen Sie sich befinden möchten, z. B. Titel, ID, Klassenname usw.
quelle
Unter Verwendung einiger Informationen hier habe ich die folgende Komponente entwickelt, die Sie in Ihren Routenerklärungen verwenden können. Es ist kompatibel mit React Router v4.
Es verwendet Typoskript, sollte aber ziemlich einfach sein, um es in natives Javascript zu konvertieren:
Und verwenden mit:
quelle
Ich hatte Glück damit:
quelle
Ich glaube nicht, dass React-Router diese Unterstützung bietet. In der Dokumentation wird erwähnt
Sie könnten stattdessen versuchen, etwas wie React-Redirect zu verwenden
quelle
Um Alans Antwort zu erweitern, können Sie ein Attribut erstellen
<Route/>
, das alle<Link/>
mit "to" -Attributen, die "http:" oder "https:" enthalten, an die richtige externe Ressource umleitet .Unten finden Sie ein Arbeitsbeispiel dafür, das direkt in Ihrem platziert werden kann
<Router>
.quelle
FÜR V3, obwohl es für V4 funktionieren kann. Ausgehend von Erics Antwort musste ich etwas mehr tun, z. B. die lokale Entwicklung, bei der 'http' in der URL nicht vorhanden ist. Ich leite auch zu einer anderen Anwendung auf demselben Server um.
Zur Router-Datei hinzugefügt:
Und die Komponente:
quelle
Wenn Sie mit Typoskript reagieren, wird eine Fehlermeldung angezeigt, da die Funktion ein Reaktionselement zurückgeben muss, nicht
void
. Also habe ich es auf diese Weise mit der Route-Render-Methode (und mit React Router v4) gemacht:Wo Sie stattdessen auch verwenden könnten
window.location.assign()
,window.location.replace()
etc.quelle
Wenn Sie serverseitiges Rending verwenden, können Sie verwenden
StaticRouter
. Mit Ihremcontext
asprops
und dann Hinzufügen einer<Redirect path="/somewhere" />
Komponente in Ihrer App. Die Idee ist, dass jedes Mal, wenn der React-Router mit einer Umleitungskomponente übereinstimmt, dem Kontext, den Sie an den statischen Router übergeben haben, etwas hinzugefügt wird, um Sie darüber zu informieren, dass Ihr Pfad mit einer Umleitungskomponente übereinstimmt. Jetzt, da Sie wissen, dass Sie eine Weiterleitung getroffen haben, müssen Sie nur noch überprüfen, ob dies die Umleitung ist, nach der Sie suchen. dann einfach durch den Server umleiten.ctx.redirect('https://example/com')
.quelle
<Redirect push={ true } to="/pathtoredirect" />
Ich konnte eine Umleitung in React-Router-Dom wie folgt erreichen
In meinem Fall suchte ich nach einer Möglichkeit, Benutzer bei jedem Besuch der Stamm-URL
http://myapp.com
an eine andere Stelle in der App umzuleitenhttp://myapp.com/newplace
. also hat das oben genannte geholfen.quelle