React Router - Wie Requisiten ohne Abfrageparameter oder Redux senden?

Question

Ich möchte Daten an eine andere Route senden, aber nicht in Abfrageparameter senden.

Ich möchte keine neue Filiale für jede Route, noch möchte ich eine Filiale, die einfach alle Routen/Parameter getrennt von, wo sie gesendet/konsumiert werden.

Gibt es eine Standardmethode, um Requisiten für eine bevorstehende Route zu spezifizieren?

Answer 1

Ich fand die Lösung auf dem React-Router location api docs.

this.props.router.push({ 
    pathname: '/view-user', 
    state: { userId } 
}); 

Dies scheint gut für Interstitial, Standalone modalen Seiten.

Möglicherweise müssen Sie ein Fallback angeben, wenn der Status fehlt, aber noch nicht so weit gekommen.

if (!this.props.location.state) this.props.router.goBack(); 

oder

const locations = this.props.location.pathname.split('/'); 
// do something 
this.props.route.push(locations.join('/')); 

Answer 2

Wenn Sie die Informationen nicht im Abfrageparameter senden, können Sie sie in eine andere Art von Speicher einfügen, der auch mit der Route verknüpft werden kann.

Sie können den Aufruf von router.push() mit Ihrer eigenen Funktion umbrechen, die ein zusätzliches Objekt übernimmt, das Sie weitergeben möchten. So etwas wie ...

function navigateTo(url, extraData) { 
    if (extraData !== undefined) { 
    saveExtraDataForRoute(url, extraData); 
    } 
    router.push(url); 
} 

In reagieren-Router gibt es eine onEnter Stütze mit der Strecke verbunden, die eine Funktion aufzurufen angibt. Der Code in dieser Funktion kann die zusätzlichen Daten abrufen und alles tun, was Sie damit tun möchten.

function onMyScreenEnter() { 
    const extraData = getExtraDataForRoute(url); 
    goCrazyNutsWithYourExtraData(extraData); 
} 

Sie würden die beiden Funktionen saveExtraDataForRoute liefern() und getExtraDataForRoute(). Sie könnten Ihren Speicher verwenden (z. B. Redux), Werte eines Singleton-Objekts festlegen oder LocalStorage verwenden. Aber im Grunde, um die Daten zu speichern, um sie später von URL abrufbaren ist, würden Sie so etwas wie sagen:

extraDataStore[url] = extraData; 

Das andere, was Sie wollen, können Sie die in unter Verwendung eines POST-Methode mit reagieren-Router. Ich habe das nicht getan und bin mir nicht sicher, wie gut es funktioniert. Hier ein Link: How to Handle Post Request in Isomorphic React + React Router Application