Zugriff auf dynamische Routenparameter beim Vorladen serverseitiger Rendervorgänge

Question

Ich versuche, eine dynamische Route zu laden, die mit Daten geladen ist, die über einen asynchronen thunk abgerufen wurden.

Ich habe eine statische initialAction Methode in meinen Komponenten, die Vorladung erfordern, und lassen Sie sie die Aktionen wie erforderlich aufrufen. Sobald alle Aktionen abgeschlossen sind und die Versprechen erfüllt sind, rendere ich die Route/Seite.

Die Frage, die ich habe, ist: Wie referenziere ich die Route Parameter und/oder Requisiten in einer statischen Funktion?

Hier ist der entsprechende Code, der alle initialAction Funktionen aufrufen kann, die zum Vorladen von Daten erforderlich sein können.

const promises = routes.reduce((promise, route) => { 
    if (matchPath(req.url, route) && route.component && route.component.initialAction) { 
     promise.push(Promise.resolve(store.dispatch(route.component.initialAction(store)))) 
    } 
    return promise; 
}, []); 

Promise.all(promises) 
.then(() => { 
    // Do stuff, render, etc 
}) 

In meiner Komponente habe ich die statische initialAction Funktion, die in dem Laden nehmen (vom Server) und Requisiten (vom Client). Auf die eine oder andere Art sollte die Kategorie über Redux/Thunk geholt werden. Wie Sie sehen, übergebe ich beim Laden über den Server die dynamische Property permalink nicht, weil ich sie nicht abrufen kann.

class Category extends Component { 

    static initialAction(store, props) { 
     let res = store !== null ? getCategory(REACT_APP_SITE_KEY) : props.getCategory(REACT_APP_SITE_KEY, props.match.params.permalink) 
     return res 
    } 

    componentDidMount(){ 
     if(isEmpty(this.props.category.categories)){ 
      Category.initialAction(null, this.props) 
     } 
    } 

    /* ... render, etc */ 
} 

Und schließlich sind hier die Routen ich verwende:

import Home from '../components/home/Home' 
import Category from '../components/Category' 
import Product from '../components/product/Product' 
import NotFound from '../components/NotFound' 

export default [ 
    { 
     path: "/", 
     exact: true, 
     component: Home 
    }, 
    { 
     path: "/category/:permalink", 
     component: Category 
    }, 
    { 
     path: "/:category/product/:permalink", 
     component: Product 
    }, 
    { 
     component: NotFound 
    } 
] 

Nicht ganz sicher, ich mache das auch in einer „Standard“ Art und Weise, aber dieser Prozess funktioniert so weit, wenn sie auf einem nicht dynamische Route. Allerdings habe ich das Gefühl, ich bin waaaay von der Basis :)

Answer 1

auf dem Server haben Sie Anfrage Objekt und auf dem Client haben Sie Standort-Objekt. Extrahieren Sie URL-Parameter von diesen Objekten, nachdem Sie die aktuelle Umgebung überprüft haben.

const promises = routes.reduce((promise, route) => { 
    var props = matchPath(req.url, route); 
    if (obj && route.component && route.component.initialAction) { 
     promise.push(Promise.resolve(store.dispatch(route.component.initialAction(store, props)))) 
    } 
    return promise; 
}, []); 

jetzt erhalten Sie url in initialAction in Desktop und Server. Sie können dynamische Route Parameter aus diesem